/* ============================================================
   TOKENS — Paleta violeta-rosada, fondo blanco
   ============================================================ */
:root{
  --v1: #4A2E6B;
  --v2: #6B3FA0;
  --v3: #8B5FC7;
  --v4: #B07FE0;
  --v5: #D4AAF0;
  --v6: #E8CCF7;
  --v7: #F6ECFD;

  --pink: #F472B6;
  --pink-soft: #FCE4F1;
  --rose: #F9A8D4;

  --grad-hero: linear-gradient(135deg, #6B3FA0 0%, #9D6FD1 40%, #C58AE3 75%, #F0A8D8 100%);
  --grad-card: linear-gradient(145deg, #ffffff 0%, #faf3fd 100%);
  --grad-accent: linear-gradient(90deg, var(--v3), var(--pink));
  --grad-subtle: linear-gradient(180deg, #8B5FC7 0%, #B07FE0 50%, #E8B8E8 100%);

  /* Header superior y nav con tonalidades distintas */
  --grad-header: linear-gradient(135deg, #4A2E6B 0%, #6B3FA0 100%);
  --grad-nav:    linear-gradient(135deg, #8B5FC7 0%, #B07FE0 60%, #C98AE8 100%);

  --bg: #FFFFFF;
  --bg-soft: #FBF7FD;
  --bg-section: #F8F1FB;
  --surface: rgba(139,95,199,0.06);
  --surface-2: rgba(139,95,199,0.12);
  --border: rgba(139,95,199,0.16);
  --border-bright: rgba(139,95,199,0.35);

  --text: #3A2655;
  --text-dim: #6B5286;
  --text-muted: #9784B0;

  --radius: 20px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  --font-display: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);

  --shadow-card: 0 4px 24px rgba(139,95,199,0.10), 0 0 0 1px rgba(139,95,199,0.08);
  --shadow-glow: 0 0 40px rgba(139,95,199,0.16);

  /* Altura del header para scroll-margin de secciones */
  --header-h: 148px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms!important; transition-duration:0.01ms!important; }
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}
.trust-band, .nueva-section{ background: var(--bg-section); }
.foro-section{ background: var(--bg-soft); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
::selection{ background: var(--v4); color: white; }
:focus-visible{ outline:2px solid var(--v4); outline-offset:3px; border-radius:4px; }

body::before{
  content:'';
  position:fixed; top:-20%; left:-10%;
  width:55vw; height:55vw;
  background: radial-gradient(circle, rgba(139,95,199,0.07), transparent 65%);
  pointer-events:none; z-index:0;
}
body::after{
  content:'';
  position:fixed; bottom:-15%; right:-10%;
  width:45vw; height:45vw;
  background: radial-gradient(circle, rgba(244,114,182,0.05), transparent 65%);
  pointer-events:none; z-index:0;
}

/* ============================================================
   MENÚ HAMBURGUESA (móvil) — botón + drawer lateral + overlay
   ============================================================ */
.hamburger-btn{
  display:none;
  flex-direction:column; justify-content:center; align-items:center;
  gap:5px;
  width:40px; height:40px;
  flex-shrink:0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  cursor:pointer;
  transition: background .2s, border-color .2s;
}
.hamburger-btn:hover{ background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); }
.hamburger-btn span{
  display:block; width:19px; height:2px; border-radius:2px;
  background: white;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.hamburger-btn[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger-btn[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav-overlay{
  position:fixed; inset:0; z-index:300;
  background: rgba(26,16,37,0.55);
  backdrop-filter: blur(2px);
  opacity:0; pointer-events:none;
  transition: opacity .25s var(--ease);
}
.mobile-nav-overlay.open{ opacity:1; pointer-events:all; }

.mobile-nav-drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:301;
  width: min(82vw, 320px);
  background: var(--bg);
  box-shadow: 8px 0 32px rgba(74,46,107,0.25);
  transform: translateX(-100%);
  transition: transform .3s var(--ease);
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.mobile-nav-drawer.open{ transform: translateX(0); }

.mobile-nav-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 18px;
  background: var(--grad-header);
  flex-shrink:0;
}
.mobile-nav-logo{ height:48px; width:auto; }
.mobile-nav-close{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.15);
  color:white; font-size:1rem;
  flex-shrink:0;
}
.mobile-nav-close:hover{ background: rgba(255,255,255,0.3); }

.mobile-nav-links, .mobile-nav-account{
  display:flex; flex-direction:column;
  padding: 10px 10px;
}
.mobile-nav-links a, .mobile-nav-account-link{
  padding: 13px 14px;
  border-radius: 10px;
  font-size: 0.92rem; font-weight:600;
  color: var(--text);
  transition: background .15s;
}
.mobile-nav-links a:hover, .mobile-nav-links a.active,
.mobile-nav-account-link:hover{
  background: var(--surface-2);
  color: var(--v2);
}
.mobile-nav-divider{ height:1px; background:var(--border); margin: 6px 18px; }
.mobile-nav-logout{ color: var(--pink) !important; }

body.mobile-nav-active{ overflow:hidden; }

/* ============================================================
   ANUNCIO CON TICKER CONTINUO Y SUAVE
   ============================================================ */
.announce{
  background: var(--grad-accent);
  color: white;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 8px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
/* Contenedor centrado, igual que el resto de secciones del sitio
   (max-width:1400px + márgenes auto), para que el ticker no quede
   pegado a la izquierda ni deje espacio vacío a la derecha */
.announce-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
  overflow: hidden;
  position: relative;
}
.announce-track{
  display: inline-flex;
  align-items: center;
  gap: 32px;
  /* velocidad suave: ~60s para recorrer, sin pausa brusca */
  animation: ticker 60s linear infinite;
  will-change: transform;
}
/* Pausa suave al pasar el ratón */
.announce:hover .announce-track{ animation-play-state: paused; }
@keyframes ticker{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.3333%); }
}
.announce-item{ flex-shrink:0; }
.announce-sep{ flex-shrink:0; opacity:0.5; font-size:0.6rem; }

/* ============================================================
   HEADER — ocupa 100% del ancho, sin max-width en capas internas
   ============================================================ */
header{
  position: sticky; top:0; z-index:200;
  width: 100%;
  /* fondo unificado para que no queden bordes */
  background: var(--grad-header);
}

/* Capa superior: logotipo + búsqueda + acciones */
.header-top{
  display: flex; align-items: center; gap: 28px;
  padding: 14px 48px;
  width: 100%;                  /* ocupa todo el ancho */
  background: var(--grad-header);
}

/* Logo — grande, sin fondo blanco, integrado al header */
.logo{ flex-shrink:0; display:flex; align-items:center; gap:10px; }
.logo-img-nav{
  height: 92px;
  width: auto;
  min-width: 200px;
  object-fit: contain;
  flex-shrink:0;
  display:block;
  background: transparent;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.logo-img-nav:hover{ transform: scale(1.03); filter: drop-shadow(0 4px 14px rgba(244,114,182,0.35)); }
.logo-img-footer{
  height: 56px; width: auto;
  object-fit: contain; flex-shrink:0;
  background: transparent;
}

/* Barra de búsqueda */
.search-wrap{
  flex:1; max-width:580px;
  display:flex; gap:8px; align-items:center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 5px 5px 5px 20px;
  transition: border-color .2s var(--ease), background .2s;
}
.search-wrap:focus-within{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.5);
}
.search-wrap input{
  flex:1; background:none; border:none; outline:none;
  color: white; font-size:0.9rem; font-family:inherit;
}
.search-wrap input::placeholder{ color: rgba(255,255,255,0.55); }
.search-filters{ display:flex; gap:4px; }
.filter-tag{
  font-size:0.7rem; font-weight:600;
  padding: 5px 11px; border-radius:999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.8);
  cursor:pointer;
  transition: background .15s, color .15s;
}
.filter-tag:hover, .filter-tag.active{
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
  color: white;
}
.search-btn{
  width:40px; height:40px; border-radius:50%;
  background: rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: background .15s var(--ease), transform .15s;
}
.search-btn:hover{ background: rgba(255,255,255,0.35); transform:scale(1.06); }
.search-btn svg{ width:15px; height:15px; stroke:white; }

/* Acciones header */
.header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.icon-btn{
  position:relative;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: white;
  transition: background .2s, border-color .2s, transform .15s var(--ease);
}
.icon-btn:hover{ background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); transform:translateY(-2px); }
.icon-btn svg{ width:18px; height:18px; stroke: rgba(255,255,255,0.9); }
.cart-count{
  position:absolute; top:-4px; right:-4px;
  background: var(--pink);
  color: white; font-size:0.6rem; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* Carrito en header — visible solo cuando hay scroll (JS añade .scrolled a header) */
.cart-header-btn{
  opacity:0; pointer-events:none;
  transform: scale(0.7);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s, border-color .2s;
}
header.scrolled .cart-header-btn{
  opacity:1; pointer-events:all;
  transform: scale(1);
}

/* Nav — tonalidad más clara/brillante que el header-top, al 100% */
nav{
  background: var(--grad-nav);
  border-top: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 2px 12px rgba(106,27,172,0.18);
  width: 100%;
}
.nav-list{
  display:flex; gap:4px;
  padding: 0 48px;
  width: 100%;                  /* sin max-width */
  font-size:0.88rem; font-weight:600;
}
.nav-list a{
  display:block;
  padding: 14px 20px;
  color: rgba(255,255,255,0.82);
  position:relative;
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.nav-list a::after{
  content:'';
  position:absolute; left:20px; right:20px; bottom:0;
  height:3px; border-radius:3px 3px 0 0;
  background: white;
  transform: scaleX(0);
  transition: transform .25s var(--ease);
}
.nav-list a:hover, .nav-list a.active{ color: white; }
.nav-list a:hover::after, .nav-list a.active::after{ transform: scaleX(1); }
.nav-badge{
  font-size:0.58rem; font-weight:700;
  background: var(--pink);
  color: white;
  padding: 2px 6px; border-radius:999px;
  margin-left:4px; vertical-align:middle;
}

/* ============================================================
   TABS DE MARCAS
   ============================================================ */
.brand-tabs{
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.brand-tab{
  font-size:0.82rem; font-weight:600;
  padding: 9px 18px; border-radius:999px;
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  color: var(--text-dim);
  cursor:pointer;
  transition: all .2s var(--ease);
}
.brand-tab:hover{ border-color: var(--v3); color: var(--v3); background: var(--v7); }
.brand-tab.active{
  background: var(--grad-accent);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 16px rgba(139,95,199,0.3);
}

/* ============================================================
   SIDEBAR LATERAL (overlay móvil)
   ============================================================ */
.sidebar-overlay{
  display:none; position:fixed; inset:0;
  background: rgba(58,38,85,0.5);
  z-index:300;
}
.sidebar-overlay.open{ display:block; }
aside.sidebar{
  position:fixed; left:-280px; top:0; bottom:0;
  width:280px; background:#ffffff;
  border-right:1px solid var(--border);
  z-index:301; padding:0; overflow-y:auto;
  transition: left .3s var(--ease);
  box-shadow: 4px 0 30px rgba(139,95,199,0.12);
}
aside.sidebar.open{ left:0; }
.sidebar-header{
  padding:20px 20px 16px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.sidebar-header h3{ font-size:0.9rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--v3); }
.sidebar-close{
  width:30px; height:30px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim);
}
.sidebar-close svg{ width:14px; height:14px; stroke:currentColor; }
.sidebar-section{ padding:16px 0; border-bottom:1px solid var(--border); }
.sidebar-section-title{
  font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--text-muted); padding:0 20px 10px;
}
.cat-btn{
  display:flex; align-items:center; gap:12px;
  width:100%; text-align:left; padding:11px 20px;
  font-size:0.86rem; font-weight:500; color:var(--text-dim);
  transition: background .15s, color .15s, border-left .15s;
  border-left: 3px solid transparent;
}
.cat-btn .cat-icon{ font-size:1rem; }
.cat-btn .cat-icon-img{
  width:22px; height:22px; border-radius:6px; object-fit:cover; flex-shrink:0;
}
.cat-btn .cat-count{
  margin-left:auto; font-size:0.7rem;
  background:var(--surface-2); color:var(--v3);
  padding:2px 8px; border-radius:999px;
}
.cat-btn:hover{ background:rgba(139,95,199,0.08); color:var(--v3); }
.cat-btn.active{ background:rgba(139,95,199,0.1); color:var(--v2); font-weight:600; border-left-color:var(--pink); }
.price-filter-sidebar{ padding:0 20px 8px; }
.price-filter-sidebar label{ font-size:0.78rem; color:var(--text-muted); display:block; margin-bottom:10px; }
.price-filter-sidebar input[type=range]{ width:100%; accent-color:var(--v3); }
.price-val{ font-weight:700; font-size:0.85rem; color:var(--v3); margin-top:6px; display:block; }

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
}
.hero-slider{
  position:relative; overflow:hidden; min-height:520px;
}
.hero-slide{
  position:absolute; inset:0;
  display:flex; align-items:center;
  padding: 80px 48px 60px;
  max-width:1400px; margin:0 auto; width:100%;
  opacity:0; transition: opacity .8s var(--ease);
  pointer-events:none;
}
.hero-slide.active{ opacity:1; pointer-events:all; }
.hero-bg{
  position:absolute; inset:0; z-index:-1;
}
.hero-bg-1{
  background: radial-gradient(ellipse at 20% 50%, rgba(139,95,199,0.3) 0%, transparent 55%),
              radial-gradient(ellipse at 70% 30%, rgba(244,114,182,0.18) 0%, transparent 50%),
              linear-gradient(160deg, #f9f0ff 0%, #ede4fd 50%, #fce4f1 100%);
}
.hero-bg-2{
  background: radial-gradient(ellipse at 80% 50%, rgba(176,127,224,0.28) 0%, transparent 55%),
              radial-gradient(ellipse at 20% 60%, rgba(244,114,182,0.15) 0%, transparent 50%),
              linear-gradient(160deg, #fef0fb 0%, #f2e5fd 50%, #fce9f5 100%);
}
.hero-bg-3{
  background: radial-gradient(ellipse at 50% 30%, rgba(212,170,240,0.3) 0%, transparent 55%),
              radial-gradient(ellipse at 30% 80%, rgba(244,114,182,0.2) 0%, transparent 55%),
              linear-gradient(160deg, #fff0f8 0%, #f5e8ff 50%, #fde8f5 100%);
}
.hero-content{ flex:1; max-width:600px; position:relative; z-index:1; }

/* Slide en modo fondo completo */
.hero-slide--fondo .hero-content{
  max-width:640px;
}
/* Cuando hay fondo + triángulo, el triángulo flota sobre el fondo en vez de apilarse */
.hero-slide--fondo .hero-visual--sobre-fondo{
  position:absolute; right:48px; top:50%; transform:translateY(-50%);
}
.hero-bg-img{
  position:absolute; inset:0; z-index:-1;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hero-bg-overlay{
  position:absolute; inset:0; z-index:0;
}
.hero-bg-overlay--claro{
  background: linear-gradient(100deg, rgba(20,10,30,0.32) 0%, rgba(20,10,30,0.10) 55%, rgba(20,10,30,0.02) 100%);
}
.hero-bg-overlay--medio{
  background: linear-gradient(100deg, rgba(20,10,30,0.62) 0%, rgba(20,10,30,0.32) 55%, rgba(20,10,30,0.06) 100%);
}
.hero-bg-overlay--oscuro{
  background: linear-gradient(100deg, rgba(10,5,18,0.85) 0%, rgba(10,5,18,0.55) 55%, rgba(10,5,18,0.15) 100%);
}
.hero-slide--fondo .hero-eyebrow{ color:#f3e6ff; }
.hero-slide--fondo .hero-eyebrow::before{ color:var(--pink); }
.hero-slide--fondo h1{ color:#fff; }
.hero-slide--fondo h1 em{ color:var(--pink); }
.hero-slide--fondo .hero-desc{ color:rgba(255,255,255,0.86); }
.hero-slide--fondo .hero-stats{ border-top-color:rgba(255,255,255,0.25); }
.hero-slide--fondo .hero-stat span{ color:rgba(255,255,255,0.75); }
.hero-slide--fondo .hero-stat strong{
  background:none; -webkit-text-fill-color:initial; color:#fff;
}
.hero-eyebrow{
  font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em;
  color: var(--v2); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.hero-eyebrow::before{ content:''; width:18px; height:2px; background:var(--pink); border-radius:2px; }
.hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size: clamp(2.1rem,4.2vw,3.3rem);
  line-height:1.15; letter-spacing:-0.02em; margin-bottom:18px; color:var(--v1);
}
.hero h1 em{
  font-style:normal;
  color: var(--pink);
}
.hero-desc{ color:var(--text-dim); font-size:1rem; max-width:460px; margin-bottom:32px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

/* Botones */
.btn{
  font-family:inherit; font-weight:600; font-size:0.88rem;
  padding:13px 28px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-primary{
  background: var(--grad-accent); color:white; border:none;
  box-shadow: 0 8px 24px -6px rgba(139,95,199,0.5);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -6px rgba(139,95,199,0.65); }
.btn-secondary{
  background: rgba(139,95,199,0.08);
  border:1.5px solid var(--border-bright); color:var(--v3);
}
.btn-secondary:hover{ transform:translateY(-2px); background:rgba(139,95,199,0.14); }
.btn-outline{
  background:transparent; border:1.5px solid var(--border); color:var(--text-dim);
}
.btn-outline:hover{ border-color:var(--v3); color:var(--v3); }

.hero-visual{
  flex-shrink:0; width:300px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.hero-visual::before{
  content:'';
  position:absolute; width:240px; height:240px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(212,170,240,0.35) 55%, transparent 78%);
  box-shadow: 0 20px 60px -10px rgba(139,95,199,0.35), inset 0 0 0 1px rgba(255,255,255,0.4);
  animation: pulseHalo 4.5s ease-in-out infinite;
}
@keyframes pulseHalo{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.05); }
}
/* El halo difuso combina con el triángulo circular, igual que con el collage de emojis */
.hero-visual--sobre-fondo{ width:auto; }

/* Triángulo de fotos — misma composición orbital que el collage de emojis */
.hero-img-triangulo{
  position:relative; width:280px; height:280px;
}
.hit-item{
  position:absolute; border-radius:50%; overflow:hidden;
  box-shadow: 0 12px 36px -8px rgba(139,95,199,0.3), 0 0 0 8px rgba(255,255,255,0.35);
  border:3px solid var(--bg);
}
.hit-item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 1 sola foto: ocupa el centro, tamaño grande */
.hero-img-triangulo--1 .hit-0{
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:200px; height:200px; z-index:3;
}

/* 2 fotos: una central grande + una orbitando arriba-derecha */
.hero-img-triangulo--2 .hit-0{
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:170px; height:170px; z-index:3;
}
.hero-img-triangulo--2 .hit-1{
  width:90px; height:90px; top:8px; right:14px; z-index:2;
  animation: floatA 4.2s ease-in-out infinite;
}

/* 3 fotos: central grande + dos orbitando (arriba-derecha y abajo-izquierda), como el collage de emojis */
.hero-img-triangulo--3 .hit-0{
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:150px; height:150px; z-index:3;
  animation: floatC 5s ease-in-out infinite;
}
.hero-img-triangulo--3 .hit-1{
  width:80px; height:80px; top:6px; right:16px; z-index:2;
  animation: floatA 4.2s ease-in-out infinite;
}
.hero-img-triangulo--3 .hit-2{
  width:72px; height:72px; bottom:10px; left:8px; z-index:2;
  animation: floatB 5.5s ease-in-out infinite;
}

/* Collage hero visual */
.hero-img-collage{
  position:relative; width:280px; height:280px;
}
.hic-blob{
  position:absolute; inset:0; border-radius:60% 40% 55% 45% / 50% 55% 45% 50%;
  background: radial-gradient(circle at 40% 40%, rgba(244,114,182,0.18) 0%, rgba(139,95,199,0.14) 60%, transparent 80%);
  animation: morphBlob 8s ease-in-out infinite;
}
.hic-blob-2{ animation-delay:-3s; border-radius:45% 55% 40% 60% / 55% 45% 60% 40%; }
.hic-blob-3{ animation-delay:-5s; }
@keyframes morphBlob{
  0%,100%{ border-radius:60% 40% 55% 45% / 50% 55% 45% 50%; transform:rotate(0deg); }
  33%{ border-radius:40% 60% 45% 55% / 60% 40% 55% 45%; transform:rotate(4deg); }
  66%{ border-radius:55% 45% 60% 40% / 45% 60% 40% 55%; transform:rotate(-3deg); }
}
.hic-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:90px; height:90px; border-radius:50%;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(6px);
  border:1.5px solid rgba(244,114,182,0.25);
  display:flex; align-items:center; justify-content:center;
  font-size:2.6rem;
  box-shadow: 0 12px 36px -8px rgba(139,95,199,0.3), 0 0 0 8px rgba(255,255,255,0.35);
  animation: floatC 5s ease-in-out infinite;
  z-index:3;
}
@keyframes floatC{
  0%,100%{ transform:translate(-50%,-50%) translateY(0); }
  50%{ transform:translate(-50%,-50%) translateY(-10px); }
}
.hic-item{
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(4px);
  border:1.5px solid rgba(255,255,255,0.6);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px -4px rgba(139,95,199,0.22);
  z-index:2;
}
.hic-a{
  width:64px; height:64px; top:12px; right:20px; font-size:1.6rem;
  animation: floatA 4.2s ease-in-out infinite;
}
.hic-b{
  width:56px; height:56px; bottom:16px; left:14px; font-size:1.4rem;
  animation: floatB 5.5s ease-in-out infinite;
}
.hic-c{
  width:52px; height:52px; top:50%; right:6px; font-size:1.2rem;
  animation: floatC2 6s ease-in-out infinite;
}
@keyframes floatA{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-9px) rotate(6deg); } }
@keyframes floatB{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-12px) rotate(-5deg); } }
@keyframes floatC2{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(8px); } }
.hero-stats{
  display:flex; gap:32px; margin-top:44px;
  border-top:1px solid rgba(139,95,199,0.2); padding-top:28px;
}
.hero-stat strong{
  font-family:var(--font-display); font-size:1.6rem; font-weight:800; display:block;
  color:var(--v2);
}
.hero-stat span{ font-size:0.76rem; color:var(--text-muted); }

/* Controles slider */
.slider-controls{
  display:flex; justify-content:center; align-items:center;
  gap:12px; padding:20px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(4px);
  border-top: 1px solid var(--border);
  position:relative; z-index:2;
}
.slider-dot{
  width:8px; height:8px; border-radius:50%;
  background: rgba(139,95,199,0.25);
  transition: all .25s var(--ease); cursor:pointer;
}
.slider-dot.active{ background:var(--v3); width:24px; border-radius:4px; }
.slider-arrow{
  width:36px; height:36px; border-radius:50%;
  background:var(--bg-soft); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition: background .15s, border-color .15s;
}
.slider-arrow:hover{ background:var(--surface-2); border-color:var(--v3); }
.slider-arrow svg{ width:15px; height:15px; stroke:var(--v3); }

/* ============================================================
   BANDA DE CONFIANZA
   ============================================================ */
.trust-band{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  position:relative; z-index:1;
  background:#fff;
}
.trust-inner{
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.trust-item{
  padding:22px 28px 22px 24px;
  display:flex; gap:16px; align-items:flex-start;
  border-right:1px solid var(--border);
  position:relative;
  transition:background .18s;
}
.trust-item:last-child{ border-right:none; }
.trust-item:hover{ background:var(--surface-2); }
.trust-item .trust-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2);
  border:1px solid var(--border);
}
.trust-item svg{ width:18px; height:18px; stroke:var(--v3); flex-shrink:0; }
.trust-item h4{ font-size:0.85rem; margin-bottom:2px; color:var(--text); font-weight:600; }
.trust-item p{ font-size:0.76rem; color:var(--text-muted); line-height:1.4; }

/* ============================================================
   SECCIÓN CATÁLOGOS (productos)
   ============================================================ */
.shop-section{
  max-width:1400px; margin:0 auto;
  padding: 72px 48px 80px;
  position:relative; z-index:1;
  /* scroll-margin compensa el sticky header */
  scroll-margin-top: var(--header-h);
}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:24px; gap:12px; flex-wrap:wrap;
}
.section-title{
  font-family:var(--font-display); font-size:2rem; color:var(--v1); letter-spacing:-0.01em;
}
.section-title span{
  color:var(--pink);
}
#resultsCount{ font-size:0.88rem; color:var(--text-muted); }

.shop-layout{ display:grid; grid-template-columns:250px 1fr; gap:36px; }

aside.cats-inline{
  align-self:start;
  /* Usa top calculado para no chocar con el nav sticky */
  position:sticky; top:calc(var(--header-h) + 16px);
  background:#ffffff; border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
.cats-inline .sidebar-section-title{ padding:16px 18px 10px; }
.cats-inline .cat-btn{ padding:10px 18px; }
.cats-inline .price-filter-sidebar{ padding:0 18px 16px; }

/* Grid de productos */
.products-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.product-card{
  background:#ffffff; border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  animation: fadeUp .45s var(--ease) both;
}
.product-card:hover{
  transform:translateY(-7px);
  border-color:var(--v4);
  box-shadow: 0 20px 48px -16px rgba(139,95,199,0.25), 0 0 0 1px rgba(139,95,199,0.12);
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
.product-image{
  aspect-ratio:1/0.85; position:relative;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(145deg, rgba(107,63,160,0.08), rgba(139,95,199,0.05));
  overflow:hidden;
}
.product-image::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 60%, rgba(212,170,240,0.15), transparent 70%);
}
.product-image .p-emoji{
  font-size:3.5rem;
  filter: drop-shadow(0 4px 14px rgba(139,95,199,0.3));
  transition: transform .35s var(--ease);
  position:relative; z-index:1;
}
.product-card:hover .p-emoji{ transform:scale(1.12) rotate(-3deg); }
.badge{
  position:absolute; top:12px; left:12px;
  font-size:0.64rem; font-weight:700; letter-spacing:0.04em;
  padding:5px 11px; border-radius:999px; z-index:2;
}
.badge-oferta{ background:var(--pink); color:white; }
.badge-nuevo{ background:var(--v2); color:white; }
.product-info{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-cat{ font-size:0.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
.product-name{ font-family:var(--font-display); font-size:0.98rem; color:var(--v1); }
.price-row{ display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:4px; }
.price{ font-size:1.02rem; color:var(--v3); font-weight:700; }
.price-old{ font-size:0.78rem; color:var(--text-muted); text-decoration:line-through; }
.product-actions{ display:flex; gap:8px; margin-top:6px; }
.product-actions .btn{ flex:1; justify-content:center; padding:10px 14px; font-size:0.78rem; }
.btn-icon{ flex:0 0 40px!important; padding:10px!important; border-radius:50%!important; }
.btn-icon svg{ width:16px; height:16px; stroke:var(--v3); margin:0; }
.no-results{
  grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--text-muted);
}
.no-results strong{ display:block; font-family:var(--font-display); color:var(--v3); font-size:1.1rem; margin-bottom:6px; }

/* ============================================================
   VITRINA DE CATEGORÍAS (home) — reemplaza el grid de
   productos en index.html; el catálogo completo está en
   NuestrosCatalogos.html
   ============================================================ */
.cat-showcase{
  max-width:1400px; margin:0 auto;
  padding: 72px 48px 80px;
  position:relative; z-index:1;
  scroll-margin-top: var(--header-h);
}
.cat-showcase-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}
.cat-showcase-card{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:20px;
  padding:28px 26px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#ffffff;
  cursor:pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.cat-showcase-card:hover, .cat-showcase-card:focus-visible{
  transform:translateY(-6px);
  border-color:var(--v4);
  box-shadow: 0 20px 48px -16px rgba(139,95,199,0.22), 0 0 0 1px rgba(139,95,199,0.1);
}
.cat-showcase-card::before{
  content:''; position:absolute; inset:0; opacity:0.5;
  background: radial-gradient(circle at 85% 20%, rgba(212,170,240,0.22), transparent 60%);
  pointer-events:none;
}
.cat-showcase-card .cs-icon{
  flex-shrink:0; font-size:2.6rem; line-height:1;
  width:74px; height:74px; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.cat-showcase-card .cs-icon-img{
  flex-shrink:0; width:74px; height:74px; border-radius:20px;
  object-fit:cover; position:relative; z-index:1;
}
.cat-showcase-card .cs-text{ flex:1; position:relative; z-index:1; }
.cat-showcase-card h3{ font-family:var(--font-display); font-size:1.18rem; color:var(--v1); margin-bottom:4px; }
.cat-showcase-card p{ font-size:0.85rem; color:var(--text-dim); margin-bottom:8px; }
.cs-count{
  display:inline-block; font-size:0.7rem; font-weight:700;
  color:var(--v3); background:var(--surface-2);
  padding:3px 10px; border-radius:999px;
}
.cs-arrow{
  flex-shrink:0; font-size:1.2rem; color:var(--v4);
  transition: transform .25s var(--ease), color .25s;
  position:relative; z-index:1;
}
.cat-showcase-card:hover .cs-arrow{ transform:translateX(5px); color:var(--pink); }

.brand-strip{
  margin-top:32px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:20px 26px;
  border:1px dashed var(--border-bright);
  border-radius:var(--radius);
  background:var(--bg-section);
}
.brand-strip-label{ font-size:0.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; flex-shrink:0; }
.brand-strip-items{ display:flex; gap:10px; flex-wrap:wrap; }
.brand-strip-items span{
  font-size:0.82rem; font-weight:600; color:var(--v2);
  background:#ffffff; border:1px solid var(--border);
  padding:6px 14px; border-radius:999px;
}

@media(max-width:768px){
  .cat-showcase{ padding:48px 20px 60px; }
  .cat-showcase-grid{ grid-template-columns:1fr; }
  .brand-strip{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   SECCIÓN TESTIMONIOS (reemplaza Ofertas)
   ============================================================ */
.testimonios-section{
  padding: 80px 48px 88px;
  background: var(--bg-section);
  position: relative; z-index:1;
  scroll-margin-top: var(--header-h);
  overflow: hidden;
}
.testimonios-section::before{
  content:'';
  position:absolute; top:-60px; right:-60px;
  width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle, rgba(176,127,224,0.14), transparent 70%);
  pointer-events:none;
}
.testimonios-inner{
  max-width:1400px; margin:0 auto;
}
.testimonios-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:20px;
  margin-top:36px;
}
.testimonio-card{
  background:#ffffff; border:1px solid var(--border);
  border-radius:var(--radius); padding:26px 24px 20px;
  display:flex; flex-direction:column; gap:14px;
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
  animation: fadeUp .4s var(--ease) both;
  position:relative;
}
/* Variación visual en las tarjetas — sin patrón uniforme */
.testimonio-card:nth-child(2){ margin-top:18px; }
.testimonio-card:nth-child(5){ margin-top:-12px; }
.testimonio-card:hover{
  transform: translateY(-4px);
  border-color: var(--v4);
  box-shadow: 0 12px 32px -10px rgba(139,95,199,0.18);
}
.testimonio-stars{ color: #F9BE00; font-size:0.88rem; letter-spacing:3px; }
.testimonio-text{
  font-size:0.91rem; color:var(--text-dim); line-height:1.7;
  position:relative;
}
.testimonio-text::before{
  content:'\201C';
  position:absolute; left:-6px; top:-8px;
  font-family:Georgia,serif; font-size:3rem;
  color:var(--v5); line-height:1; pointer-events:none;
  opacity:0.35;
}
.testimonio-footer{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:14px; border-top:1px solid var(--border); }
.testimonio-avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.9rem; font-weight:700; color:white;
}
.tav-1{ background:linear-gradient(135deg,#6B3FA0,#F472B6); }
.tav-2{ background:linear-gradient(135deg,#4A2E6B,#B07FE0); }
.tav-3{ background:linear-gradient(135deg,#8B5FC7,#F9A8D4); }
.tav-4{ background:linear-gradient(135deg,#3D1A72,#F472B6); }
.tav-5{ background:linear-gradient(135deg,#6B3FA0,#F9A8D4); }
.tav-6{ background:linear-gradient(135deg,#4A2E6B,#F472B6); }
.testimonio-info .tname{ font-size:0.85rem; font-weight:700; color:var(--text); }
.testimonio-info .tprod{ font-size:0.72rem; color:var(--text-muted); margin-top:1px; }
.testimonio-badge{
  margin-left:auto; flex-shrink:0;
  font-size:0.63rem; font-weight:700;
  padding:3px 9px; border-radius:999px;
  background:var(--surface-2); color:var(--v3);
  border:1px solid var(--border);
  white-space:nowrap;
}

/* CTA banner dentro de testimonios */
.testimonios-cta{
  margin-top:48px;
  background: var(--grad-accent);
  border-radius:var(--radius);
  padding:36px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
  box-shadow: 0 12px 36px rgba(139,95,199,0.3);
}
.testimonios-cta h3{
  font-family:var(--font-display);
  font-size:1.6rem; color:white; margin-bottom:6px;
}
.testimonios-cta p{ color:rgba(255,255,255,0.82); font-size:0.92rem; }
.testimonios-cta .btn{
  background:white; color:var(--v2); border:none; flex-shrink:0;
  box-shadow:0 4px 14px rgba(0,0,0,0.15);
}
.testimonios-cta .btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.2); }

@media(max-width:900px){
  .testimonios-grid{ grid-template-columns:repeat(2,1fr); }
  .testimonios-cta{ padding:28px 24px; }
}
@media(max-width:580px){
  .testimonios-grid{ grid-template-columns:1fr; }
  .testimonios-section{ padding:48px 20px 60px; }
  .testimonios-cta h3{ font-size:1.3rem; }
}

/* ============================================================
   NUEVA COLECCIÓN
   ============================================================ */
.nueva-section{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  position:relative; z-index:1; overflow:hidden;
  scroll-margin-top: var(--header-h);
}
.nueva-inner{
  max-width:1400px; margin:0 auto;
  padding:80px 48px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.nueva-tag{
  display:inline-block; font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.1em;
  color:var(--pink); margin-bottom:16px;
}
.nueva-section h2{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,3.2vw,2.8rem);
  line-height:1.12; color:var(--v1); margin-bottom:16px;
}
.nueva-section p{ color:var(--text-dim); font-size:0.96rem; margin-bottom:26px; }
.nueva-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.nueva-mini{
  background:#ffffff; border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:20px;
  text-align:center; cursor:pointer;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.nueva-mini:hover{ transform:translateY(-5px); border-color:var(--v4); box-shadow:var(--shadow-card); }
.nueva-mini .e{ font-size:2.4rem; margin-bottom:10px; }
.nueva-mini h4{ font-family:var(--font-display); font-size:0.9rem; color:var(--v1); margin-bottom:4px; }
.nueva-mini .np{ font-size:0.82rem; color:var(--v3); font-weight:700; }

/* ============================================================
   MODAL PRODUCTO
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(58,38,85,0.5);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:24px; z-index:1000;
  opacity:0; visibility:hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal{
  background:#ffffff; border:1px solid var(--border-bright);
  border-radius:26px; max-width:860px; width:100%;
  max-height:90vh; overflow-y:auto;
  display:grid; grid-template-columns:1fr 1fr;
  position:relative;
  transform:translateY(22px) scale(.97);
  transition:transform .35s var(--ease);
  box-shadow:0 40px 80px -20px rgba(58,38,85,0.25), var(--shadow-glow);
}
.modal-overlay.open .modal{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:50%;
  background:var(--bg-soft); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  z-index:5; transition:background .15s;
}
.modal-close:hover{ background:var(--surface-2); }
.modal-close svg{ width:14px; height:14px; stroke:var(--v3); }
.modal-image{
  display:flex; align-items:center; justify-content:center;
  font-size:7rem; min-height:280px;
  background:linear-gradient(145deg, rgba(107,63,160,0.1), rgba(139,95,199,0.05));
  border-radius:26px 0 0 26px; position:relative; overflow:hidden;
}
.modal-image::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 60%, rgba(212,170,240,0.25), transparent 70%);
}
.modal-body{ padding:36px 30px; display:flex; flex-direction:column; gap:15px; }
.modal-body .product-cat{ margin-bottom:-6px; }
.modal-body h3{ font-family:var(--font-display); font-size:1.45rem; color:var(--v1); }
.modal-desc{ color:var(--text-dim); font-size:0.9rem; line-height:1.65; }
.modal-price{ font-family:var(--font-display); font-size:1.45rem; color:var(--v3); font-weight:700; }
.option-label{
  font-size:0.7rem; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:0.07em; font-weight:700;
  margin-bottom:8px; display:block;
}
.color-swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{
  width:28px; height:28px; border-radius:50%;
  border:2px solid var(--border); cursor:pointer;
  transition:transform .15s, border-color .15s; position:relative;
}
.swatch.selected{ border-color:var(--v3); transform:scale(1.15); }
.swatch.selected::after{
  content:'✓'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.65rem; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.ref-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.ref-chip{
  font-size:0.78rem; font-weight:600; padding:6px 12px;
  border-radius:var(--radius-xs); background:var(--surface);
  border:1px solid var(--border); color:var(--text-dim);
  cursor:pointer; transition:all .15s;
}
.ref-chip.selected{ border-color:var(--v4); background:var(--surface-2); color:var(--v2); }
.specs-table{ font-size:0.83rem; }
.specs-table div{
  display:flex; justify-content:space-between;
  padding:7px 0; border-bottom:1px dashed rgba(139,95,199,0.15); color:var(--text-muted);
}
.specs-table div span:last-child{ color:var(--text); font-weight:600; }
.modal-actions{ display:flex; gap:10px; margin-top:8px; }
.modal-actions .btn{ flex:1; justify-content:center; }

/* ============================================================
   FORO (comunidad.html) — estilos compartidos
   ============================================================ */
.foro-section{
  max-width:1400px; margin:0 auto;
  padding:72px 48px 80px;
  position:relative; z-index:1;
}
.foro-layout{ display:grid; grid-template-columns:1fr 360px; gap:36px; align-items:start; }
.foro-posts{ display:flex; flex-direction:column; gap:16px; }
.foro-post{
  background:#ffffff; border:1px solid var(--border);
  border-radius:var(--radius); padding:22px 24px;
  transition:border-color .25s, box-shadow .25s;
  animation: fadeUp .4s var(--ease) both;
}
.foro-post:hover{ border-color:var(--v4); box-shadow:var(--shadow-card); }
.foro-post-header{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.foro-avatar{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0; color:white; font-weight:700;
  border:2px solid var(--border);
}
.av-1{ background:linear-gradient(135deg,#6B3FA0,#F472B6); }
.av-2{ background:linear-gradient(135deg,#4A2E6B,#B07FE0); }
.av-3{ background:linear-gradient(135deg,#8B5FC7,#F9A8D4); }
.av-4{ background:linear-gradient(135deg,#3D1A72,#F472B6); }
.foro-user{ font-weight:600; font-size:0.87rem; color:var(--text); }
.foro-date{ font-size:0.73rem; color:var(--text-muted); }
.foro-post-title{ font-family:var(--font-display); font-size:1.03rem; color:var(--v2); margin-bottom:8px; }
.foro-post-body{ font-size:0.86rem; color:var(--text-dim); line-height:1.65; margin-bottom:14px; }
.foro-post-footer{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.foro-tag{
  font-size:0.67rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  padding:4px 10px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--v3);
}
.foro-reactions{ display:flex; gap:8px; margin-left:auto; }
.react-btn{
  font-size:0.77rem; color:var(--text-muted);
  display:flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface);
  transition:all .15s;
}
.react-btn:hover{ border-color:var(--v4); color:var(--v2); }
.foro-new{
  background:#ffffff; border:1.5px solid var(--border-bright);
  border-radius:var(--radius); padding:24px;
  position:sticky; top:calc(var(--header-h) + 16px);
}
.foro-new h3{ font-family:var(--font-display); font-size:1.2rem; color:var(--v2); margin-bottom:16px; }
.foro-field{
  width:100%; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; color:var(--text); font-family:inherit; font-size:0.87rem;
  outline:none; resize:none; transition:border-color .2s; margin-bottom:10px;
}
.foro-field::placeholder{ color:var(--text-muted); }
.foro-field:focus{ border-color:var(--v4); }
.foro-new textarea.foro-field{ min-height:100px; }
.foro-btn{ width:100%; justify-content:center; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--bg-soft); border-top:1px solid var(--border); position:relative; z-index:1; }
.footer-top{
  max-width:1400px; margin:0 auto;
  padding:64px 48px 40px;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px;
}
.footer-brand p{ color:var(--text-muted); font-size:0.85rem; margin-top:14px; max-width:260px; line-height:1.7; }
.footer-col h5{
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--v3); margin-bottom:16px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a, .footer-col li{ font-size:0.84rem; color:var(--text-muted); transition:color .15s; }
.footer-col a:hover{ color:var(--v3); }
.social-row{ display:flex; gap:10px; margin-top:18px; }
.social-row a{
  width:38px; height:38px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, transform .15s, background .15s;
}
.social-row a:hover{ border-color:var(--v3); background:var(--surface-2); transform:translateY(-2px); }
.social-row svg{ width:16px; height:16px; stroke:var(--v3); }
.footer-payments{
  max-width:1400px; margin:0 auto;
  padding:20px 48px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.pay-label{ font-size:0.72rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin-right:4px; }
.pay-badge{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-xs); padding:6px 14px;
  font-size:0.74rem; font-weight:700; color:var(--text-dim);
}
.footer-bottom{
  border-top:1px solid var(--border); padding:18px 48px;
  max-width:1400px; margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:0.75rem; color:var(--text-muted);
}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed; bottom:28px; right:28px;
  background:#ffffff; border:1.5px solid var(--v4);
  border-radius:var(--radius-sm); padding:14px 20px;
  display:flex; align-items:center; gap:12px;
  font-size:0.86rem; font-weight:500; color:var(--text);
  box-shadow:0 12px 36px rgba(139,95,199,0.14);
  transform:translateY(20px); opacity:0; pointer-events:none;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
  z-index:1100;
}
.toast.show{ transform:translateY(0); opacity:1; }
.toast svg{ width:18px; height:18px; stroke:var(--v3); flex-shrink:0; }

/* ============================================================
   CARRITO FLOTANTE (6 — visible en la parte superior,
   se oculta al hacer scroll y aparece en el header)
   ============================================================ */
.cart-float{
  position:fixed; bottom:96px; right:28px;
  width:56px; height:56px; border-radius:50%;
  background: var(--grad-accent);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 28px rgba(139,95,199,0.45);
  z-index:900; border:none; cursor:pointer;
  transition: transform .25s var(--ease), box-shadow .25s, opacity .3s var(--ease);
}
.cart-float:hover{ transform:scale(1.1); box-shadow:0 12px 32px rgba(139,95,199,0.55); }
.cart-float svg{ width:22px; height:22px; stroke:white; stroke-width:2; }
.cart-float .cart-count{
  top:-5px; right:-5px;
  width:20px; height:20px; font-size:0.65rem;
}
/* Cuando hay scroll, el flotante se esconde (JS añade .scrolled al header) */
header.scrolled ~ .cart-float,
body.scrolled .cart-float{
  opacity:0; pointer-events:none; transform:scale(0.7);
}

/* WhatsApp flotante */
.whatsapp-float{
  position:fixed; bottom:28px; right:28px;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,0.45); z-index:900;
  transition:transform .2s var(--ease);
}
.whatsapp-float:hover{ transform:scale(1.1); }
.whatsapp-float svg{ width:28px; height:28px; fill:white; }

/* Botón sidebar (mobile) */
.sidebar-toggle{
  position:fixed; bottom:160px; right:28px;
  width:52px; height:52px; border-radius:50%;
  background:var(--grad-accent);
  display:none; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(139,95,199,0.4); z-index:900;
  transition:transform .2s var(--ease);
}
.sidebar-toggle:hover{ transform:scale(1.1); }
.sidebar-toggle svg{ width:22px; height:22px; stroke:white; }

/* ============================================================
   CARRITO DRAWER
   ============================================================ */
.cart-overlay{
  display:none; position:fixed; inset:0;
  background:rgba(58,38,85,0.45); backdrop-filter:blur(3px); z-index:400;
}
.cart-overlay.open{ display:block; }
aside.cart-drawer{
  position:fixed; right:-420px; top:0; bottom:0;
  width:400px; background:#ffffff;
  border-left:1px solid var(--border); z-index:401;
  display:flex; flex-direction:column;
  transition:right .32s var(--ease);
  box-shadow:-4px 0 30px rgba(139,95,199,0.18);
}
aside.cart-drawer.open{ right:0; }
.cart-drawer-header{
  padding:22px 22px 18px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-shrink:0;
}
.cart-drawer-header h3{ font-family:var(--font-display); font-size:1.1rem; color:var(--v2); display:flex; align-items:center; gap:8px; }
.cart-drawer-close{
  width:32px; height:32px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition:background .15s;
}
.cart-drawer-close:hover{ background:var(--surface-2); }
.cart-drawer-close svg{ width:14px; height:14px; stroke:currentColor; }
.cart-drawer-body{ flex:1; overflow-y:auto; padding:18px 22px; display:flex; flex-direction:column; gap:14px; }
.cart-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:12px; padding:60px 16px; color:var(--text-muted);
}
.cart-empty .cart-empty-icon{ font-size:2.6rem; opacity:0.6; }
.cart-empty strong{ color:var(--v3); font-family:var(--font-display); font-size:1rem; }
.cart-item{
  display:flex; gap:14px; align-items:center; padding:12px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-soft); animation:fadeUp .3s var(--ease) both;
}
.cart-item-thumb{
  width:56px; height:56px; flex-shrink:0; border-radius:var(--radius-xs);
  background:linear-gradient(145deg,rgba(107,63,160,0.1),rgba(139,95,199,0.05));
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
}
.cart-item-info{ flex:1; min-width:0; }
.cart-item-name{ font-size:0.85rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-cat{ font-size:0.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }
.cart-item-price{ font-size:0.83rem; color:var(--v3); font-weight:700; margin-top:4px; }
.cart-item-qty{
  display:flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:3px; flex-shrink:0;
}
.qty-btn{
  width:22px; height:22px; border-radius:50%;
  background:#ffffff; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; font-weight:700; color:var(--v3); transition:background .15s,border-color .15s;
}
.qty-btn:hover{ background:var(--surface-2); border-color:var(--v4); }
.cart-item-qty span{ font-size:0.82rem; font-weight:600; min-width:16px; text-align:center; }
.cart-item-remove{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); transition:background .15s,color .15s;
}
.cart-item-remove:hover{ background:var(--pink-soft); color:var(--pink); }
.cart-item-remove svg{ width:14px; height:14px; stroke:currentColor; }
.cart-drawer-footer{
  border-top:1px solid var(--border); padding:18px 22px 22px;
  flex-shrink:0; display:flex; flex-direction:column; gap:12px;
}
.cart-subtotal-row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:0.9rem; color:var(--text-dim);
}
.cart-subtotal-row strong{ font-family:var(--font-display); font-size:1.3rem; color:var(--v2); }
.cart-drawer-footer .btn{ width:100%; justify-content:center; }
.cart-footer-note{ font-size:0.73rem; color:var(--text-muted); text-align:center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .shop-layout{ grid-template-columns:1fr; }
  aside.cats-inline{ display:none; }
  .products-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-inner{ grid-template-columns:repeat(2,1fr); }
  .nueva-inner{ grid-template-columns:1fr; gap:40px; }
  .foro-layout{ grid-template-columns:1fr; }
  .foro-new{ position:static; }
  .sidebar-toggle{ display:flex; }
}
@media (max-width:768px){
  :root{ --header-h: 130px; }

  /* Header: dos filas en móvil, sin espacio lateral */
  .header-top{
    flex-wrap: nowrap;          /* logo + acciones en una fila */
    padding: 10px 16px;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
  }
  /* Búsqueda va debajo en su propia fila */
  .search-wrap{
    display: none;              /* se oculta en móvil para no romper layout */
  }
  /* Mostrar búsqueda solo si se activa con botón (mejora futura) */
  .search-filters{ display:none; }

  .nav-list{ padding:0 16px; gap:0; overflow-x:auto; width:100%; }
  .nav-list a{ padding:12px 12px; font-size:0.8rem; white-space:nowrap; }

  .announce-inner{ padding:0 16px; }

  /* Hamburguesa visible en móvil; nav clásica y botones de cuenta se ocultan
     porque ya viven dentro del menú lateral (drawer) */
  .hamburger-btn{ display:flex; }
  header nav{ display:none; }
  .btn-user{ display:none; }

  .logo-img-nav{
    height: 64px;
    min-width: 150px;
  }

  .hero-slide{ flex-direction:column; padding:48px 24px 28px; }
  .hero-slide--fondo{ padding:48px 24px 36px; }
  .hero-slide--fondo .hero-content{ max-width:100%; }
  .hero-visual{ display:none; }
  .hero-stats{ gap:16px; flex-wrap:wrap; }
  .hero-ctas .btn-secondary{ display:none; }
  .shop-section, .testimonios-section, .foro-section{ padding:48px 20px 60px; }
  .nueva-inner{ padding:48px 20px; }
  .products-grid{ grid-template-columns:1fr; }
  .modal{ grid-template-columns:1fr; }
  .modal-image{ border-radius:26px 26px 0 0; min-height:200px; }
  .footer-top{ grid-template-columns:1fr 1fr; padding:48px 20px 32px; }
  .footer-bottom,.footer-payments{ padding-left:20px; padding-right:20px; }
  .nueva-cards{ grid-template-columns:1fr; }
  .trust-inner{ grid-template-columns:1fr; }
  .brand-tabs{ gap:8px; }

  /* Carrito flotante en móvil: position:fixed no afecta flujo,
     pero nos aseguramos de que no haya ningún placeholder en el DOM */
  .cart-float{
    position: fixed;            /* siempre fixed, nunca static */
    bottom: 96px; right: 18px;
    width: 52px; height: 52px;
  }
  .whatsapp-float{
    position: fixed;
    bottom: 28px; right: 18px;
    width: 52px; height: 52px;
  }
  .sidebar-toggle{
    position: fixed;
    bottom: 164px; right: 18px;
    width: 48px; height: 48px;
  }
}
@media (max-width:480px){
  .footer-top{ grid-template-columns:1fr; }
  .hero h1{ font-size:1.9rem; }
  .toast{ left:16px; right:16px; bottom:16px; }
  aside.cart-drawer{ width:100%; right:-100%; }
  .logo-img-nav{ height:56px; min-width:130px; }
}

/* ============================================================
   EXTRAS PHP — auth, panel, flash, botones usuario
   ============================================================ */
.btn-user{
  font-size:0.82rem; font-weight:600;
  padding:9px 16px; border-radius:999px;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.35);
  color:white; white-space:nowrap;
  transition:background .2s, transform .15s;
}
.btn-user:hover{ background:rgba(255,255,255,0.3); transform:translateY(-1px); }
.btn-user-outline{ background:transparent; }
.flash-msg{
  background:var(--grad-accent); color:white;
  text-align:center; padding:12px 20px;
  font-size:0.88rem; font-weight:600;
  position:relative; z-index:150;
}
.grad-text{
  font-style:normal;
  color:var(--pink);
}
.auth-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--grad-header);
}
.auth-box{
  background:white; border-radius:var(--radius);
  padding:40px 36px; width:100%; max-width:420px;
  box-shadow:0 24px 60px rgba(58,38,85,0.25);
}
.auth-box h1{ font-family:var(--font-display); color:var(--v1); font-size:1.6rem; margin-bottom:6px; }
.auth-sub{ color:var(--text-muted); font-size:0.9rem; margin-bottom:24px; }
.auth-form label{ display:block; margin-bottom:14px; font-size:0.82rem; font-weight:600; color:var(--text-dim); }
.auth-form input{
  width:100%; margin-top:6px; padding:12px 14px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:inherit; font-size:0.9rem;
}
.auth-form input:focus{ border-color:var(--v4); outline:none; }
.auth-submit{ width:100%; justify-content:center; margin-top:8px; }
.auth-link{ text-align:center; margin-top:20px; font-size:0.88rem; color:var(--text-muted); }
.auth-link a{ color:var(--v3); font-weight:600; }
.auth-error{ background:#fde8ef; color:#b4235a; padding:10px 14px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:0.85rem; }
.auth-success{ background:#e8f8ef; color:#1a7a42; padding:10px 14px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:0.85rem; }
.logo-img-auth{ height:56px; margin:0 auto 20px; }
.auth-logo{ justify-content:center; }
.panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 40px; background:var(--grad-header);
}
.panel-nav{ display:flex; gap:16px; }
.panel-nav a{ color:rgba(255,255,255,0.9); font-size:0.88rem; font-weight:600; }
.panel-nav a:hover{ color:white; }
.panel-main{ max-width:900px; margin:0 auto; padding:40px 24px 80px; position:relative; z-index:1; }
.panel-card{
  background:white; border:1px solid var(--border);
  border-radius:var(--radius); padding:28px; margin-bottom:24px;
}
.panel-card h1{ font-family:var(--font-display); color:var(--v1); margin-bottom:8px; }
.panel-card h2{ font-family:var(--font-display); color:var(--v2); font-size:1.2rem; margin-bottom:16px; }
.panel-meta{ color:var(--text-muted); font-size:0.88rem; margin-bottom:4px; }
.panel-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.panel-post{ border-top:1px solid var(--border); padding:16px 0; }
.panel-post h3{ font-size:1rem; color:var(--v2); margin:8px 0; }
.panel-post p{ color:var(--text-dim); font-size:0.88rem; }
.panel-post small{ color:var(--text-muted); font-size:0.78rem; }
.panel-empty{ color:var(--text-muted); }
.community-hero{
  background:linear-gradient(135deg,#6B3FA0 0%,#9B5FD1 50%,#D4A0E8 100%);
  padding:72px 48px 64px; text-align:center; position:relative; overflow:hidden;
}
.community-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,0.12),transparent 60%);
}
.community-hero-inner{ position:relative; z-index:1; max-width:700px; margin:0 auto; }
.community-eyebrow{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.75); margin-bottom:12px; }
.community-hero h1{ font-family:var(--font-display); font-size:clamp(2rem,4vw,3.2rem); color:white; margin-bottom:14px; }
.community-hero h1 em{ font-style:italic; opacity:0.9; }
.community-hero p{ color:rgba(255,255,255,0.82); margin-bottom:28px; }
.community-stats{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,0.2); padding-top:28px; }
.community-stat strong{ display:block; font-family:var(--font-display); font-size:1.8rem; color:white; }
.community-stat span{ font-size:0.78rem; color:rgba(255,255,255,0.7); }
.foro-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; max-width:1400px; margin-left:auto; margin-right:auto; padding:0 48px; }
.foro-filter-btn{
  font-size:0.82rem; font-weight:600; padding:8px 16px; border-radius:999px;
  background:var(--bg-soft); border:1.5px solid var(--border); color:var(--text-dim);
  transition:all .2s var(--ease);
}
.foro-filter-btn:hover{ border-color:var(--v3); color:var(--v3); }
.foro-filter-btn.active{ background:var(--grad-accent); border-color:transparent; color:white; }
.foro-like-form{ margin-left:auto; }
.auth-hint{ color:var(--text-muted); font-size:0.88rem; margin-bottom:12px; }
.foro-rules{
  background:white; border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; margin-top:20px;
}
.foro-rules h4{ font-family:var(--font-display); color:var(--v2); margin-bottom:14px; }
.foro-rules ul{ display:flex; flex-direction:column; gap:10px; }
.foro-rules li{ font-size:0.82rem; color:var(--text-dim); display:flex; gap:8px; }
.foro-rules li::before{ content:'✦'; color:var(--pink); }
.cat-hero{ background:var(--grad-subtle); padding:56px 48px 44px; position:relative; overflow:hidden; }
.cat-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 15% 30%,rgba(255,255,255,0.18),transparent 55%);
}
.cat-hero-inner{ position:relative; z-index:1; max-width:1400px; margin:0 auto; }
.cat-hero-eyebrow{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.85); margin-bottom:10px; }
.cat-hero h1{ font-family:var(--font-display); font-size:clamp(1.9rem,3.4vw,2.7rem); color:white; margin-bottom:10px; max-width:680px; }
.cat-hero p{ color:rgba(255,255,255,0.85); max-width:560px; }
.cat-hero-breadcrumb{ display:flex; gap:6px; margin-bottom:18px; font-size:0.78rem; color:rgba(255,255,255,0.7); }
.cat-hero-breadcrumb a{ color:rgba(255,255,255,0.92); font-weight:600; }
a.cat-showcase-card{ text-decoration:none; color:inherit; }
.nueva-mini{ text-decoration:none; color:inherit; display:block; }
@media(max-width:768px){
  .community-hero{ padding:48px 20px 40px; }
  .foro-filters{ padding:0 20px; }
  .cat-hero{ padding:36px 20px 30px; }
  .header-actions{ gap:6px; }
  .btn-user{ padding:7px 10px; font-size:0.75rem; }
}

/* ============================================================
   PRODUCTO: SWATCHES DE VARIANTES Y TIPO
   ============================================================ */
.prod-swatches {
  display: flex; gap: 5px; flex-wrap: wrap; margin: 6px 0;
}
.prod-swatch {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 0 1px var(--border);
  display: inline-block; flex-shrink: 0;
}
.prod-swatch-more {
  font-size: 0.68rem; color: var(--text-muted); align-self: center;
}
.prod-tipo {
  font-size: 0.73rem; color: var(--text-muted); margin-bottom: 4px;
  font-weight: 500;
}

/* Modal variantes */
.modal-variantes { margin: 12px 0; }
.variantes-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.var-opt input[type="radio"] { flex-shrink: 0; }

/* ============================================================
   PANEL DE USUARIO — rediseño completo
   ============================================================ */
.panel-body { background: #f5f3f8; min-height: 100vh; }

/* Hero del perfil */
.panel-hero {
  background: var(--grad-header);
  padding: 48px 40px 40px;
}
.panel-hero-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.panel-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 3px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 2.2rem;
  color: white; font-weight: 800; flex-shrink: 0;
}
.panel-hero-info { flex: 1; min-width: 200px; }
.panel-hero-info h1 {
  font-family: var(--font-display); color: white;
  font-size: 1.9rem; margin-bottom: 4px;
}
.panel-hero-emoji { font-style: normal; }
.panel-hero-email { color: rgba(255,255,255,0.8); font-size: 0.9rem; margin-bottom: 2px; }
.panel-hero-since { color: rgba(255,255,255,0.6); font-size: 0.8rem; }
.panel-hero-stats { display: flex; gap: 24px; }
.panel-stat {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px; padding: 14px 20px; text-align: center;
  min-width: 80px;
}
.panel-stat-num { display: block; font-size: 1.6rem; font-weight: 700; color: white; line-height: 1; }
.panel-stat-label { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.7); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Tabs */
.panel-tabs-bar {
  background: white;
  border-bottom: 2px solid var(--border);
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 8px rgba(58,38,85,0.08);
}
.panel-tabs-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; gap: 0; padding: 0 24px;
}
.panel-tab {
  padding: 16px 22px; font-size: 0.88rem; font-weight: 600;
  color: var(--text-muted); border-bottom: 3px solid transparent;
  margin-bottom: -2px; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  transition: color .2s, border-color .2s;
}
.panel-tab:hover { color: var(--v2); }
.panel-tab.active { color: var(--v1); border-bottom-color: var(--v1); }
.tab-badge {
  background: var(--v4); color: white;
  font-size: 0.65rem; font-weight: 700;
  border-radius: 99px; padding: 1px 7px; min-width: 18px;
  text-align: center;
}

/* Main */
.panel-main { max-width: 960px; margin: 0 auto; padding: 36px 24px 80px; }
.panel-section { }
.panel-section-head { margin-bottom: 24px; }
.panel-section-head h2 { font-family: var(--font-display); color: var(--v1); font-size: 1.4rem; margin-bottom: 4px; }
.panel-section-head p { color: var(--text-muted); font-size: 0.88rem; }

/* Info grid (tab perfil) */
.panel-info-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px; margin-bottom: 32px;
}
.panel-info-card {
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  display: flex; align-items: flex-start; gap: 14px;
}
.panel-info-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
.panel-info-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.panel-info-value { font-size: 0.92rem; font-weight: 600; color: var(--text-dim); }

/* Quick actions */
.panel-quick-actions { display: flex; flex-direction: column; gap: 12px; }
.panel-action-btn {
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 22px;
  display: flex; align-items: center; gap: 16px;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.panel-action-btn:hover {
  border-color: var(--v4);
  box-shadow: 0 4px 16px rgba(107,63,160,0.12);
  transform: translateY(-2px);
}
.pab-icon { font-size: 1.8rem; flex-shrink: 0; }
.pab-text { display: flex; flex-direction: column; }
.pab-text strong { font-size: 0.95rem; color: var(--v1); }
.pab-text small { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

/* Pedidos */
.pedidos-list { display: flex; flex-direction: column; gap: 16px; }
.pedido-card {
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.pedido-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  background: #faf8fc; flex-wrap: wrap; gap: 8px;
}
.pedido-codigo { font-weight: 700; font-size: 0.9rem; color: var(--v1); margin-right: 10px; }
.pedido-fecha { font-size: 0.78rem; color: var(--text-muted); }
.pedido-card-body {
  display: flex; flex-wrap: wrap; gap: 0;
}
.pedido-meta-item {
  flex: 1; min-width: 130px;
  padding: 16px 20px; border-right: 1px solid var(--border);
}
.pedido-meta-item:last-child { border-right: none; }
.pedido-meta-label { display: block; font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.pedido-meta-val { font-size: 0.9rem; font-weight: 600; color: var(--text-dim); }
.pedido-total-val { font-size: 1.05rem; color: var(--v1); font-weight: 700; }

/* Estado badges */
.badge-estado {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.75rem; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
}
.badge-estado-aprobado  { background: #d1fae5; color: #065f46; }
.badge-estado-pendiente { background: #fef3c7; color: #92400e; }
.badge-estado-rechazado { background: #fee2e2; color: #991b1b; }

/* Publicaciones en panel */
.panel-posts { display: flex; flex-direction: column; gap: 16px; }
.panel-post-card {
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
}
.ppc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ppc-date { font-size: 0.78rem; color: var(--text-muted); }
.panel-post-card h3 { font-size: 1rem; color: var(--v2); margin-bottom: 8px; }
.panel-post-card p { color: var(--text-dim); font-size: 0.88rem; line-height: 1.6; }
.ppc-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ppc-likes { font-size: 0.8rem; color: var(--text-muted); }

/* Empty state */
.panel-empty-state {
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 56px 32px; text-align: center;
}
.pes-icon { font-size: 3rem; display: block; margin-bottom: 16px; }
.panel-empty-state h3 { font-family: var(--font-display); color: var(--v1); font-size: 1.2rem; margin-bottom: 8px; }
.panel-empty-state p { color: var(--text-muted); margin-bottom: 20px; }

/* Panel footer */
.panel-footer {
  background: var(--grad-header); color: rgba(255,255,255,0.7);
  text-align: center; padding: 20px; font-size: 0.8rem;
}
.panel-footer a { color: rgba(255,255,255,0.9); font-weight: 600; }

/* Panel nav exit button */
.panel-nav-exit {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px; padding: 6px 14px;
  font-size: 0.8rem;
}
.panel-nav-exit:hover { background: rgba(255,255,255,0.25); }

@media (max-width: 600px) {
  .panel-hero { padding: 32px 20px 28px; }
  .panel-hero-inner { gap: 16px; }
  .panel-avatar { width: 60px; height: 60px; font-size: 1.6rem; }
  .panel-hero-info h1 { font-size: 1.4rem; }
  .panel-hero-stats { gap: 12px; }
  .panel-tabs-inner { overflow-x: auto; padding: 0 16px; }
  .panel-tab { padding: 14px 14px; font-size: 0.8rem; }
  .pedido-card-body { flex-direction: column; }
  .pedido-meta-item { border-right: none; border-bottom: 1px solid var(--border); padding: 12px 16px; }
  .pedido-meta-item:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════
   HERO EMPTY PLACEHOLDER
══════════════════════════════════════════════ */
.hero-empty-placeholder {
  min-height: 520px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f9f0ff 0%, #ede4fd 50%, #fce4f1 100%);
  border-bottom: 1px solid var(--border);
}
.hero-empty-inner {
  text-align: center;
  padding: 48px 32px;
  max-width: 480px;
}
.hero-empty-icon {
  font-size: 3.5rem;
  display: block;
  margin-bottom: 16px;
  opacity: 0.5;
}
.hero-empty-inner p {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
}
.hero-empty-inner a {
  color: var(--v3);
  font-weight: 600;
  text-decoration: underline;
}

/* ══════════════════════════════════════════════
   PANEL PERFIL — REDISEÑO
══════════════════════════════════════════════ */
.panel-hero {
  background: linear-gradient(135deg, #6D28D9 0%, #9333EA 50%, #C026D3 100%);
  padding: 52px 48px 44px;
  position: relative;
  overflow: hidden;
}
.panel-hero-bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.phbs-1 {
  position: absolute; top: -60px; right: -60px;
  width: 280px; height: 280px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
}
.phbs-2 {
  position: absolute; bottom: -40px; left: 10%;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.panel-hero-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 28px;
  position: relative; z-index: 1;
  flex-wrap: wrap;
}
.panel-avatar-wrap { position: relative; flex-shrink: 0; }
.panel-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  border: 2.5px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800; color: white;
  letter-spacing: -0.02em;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.panel-avatar-badge {
  position: absolute; bottom: -4px; right: -4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #FBBF24;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.panel-hero-info { flex: 1; min-width: 200px; }
.panel-hero-info h1 {
  font-family: var(--font-display);
  font-size: 1.9rem; color: white;
  margin-bottom: 8px; font-weight: 800;
}
.panel-hero-email, .panel-hero-since {
  display: flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.75); font-size: 0.85rem; margin-bottom: 4px;
}
.panel-hero-email svg, .panel-hero-since svg { opacity: 0.7; flex-shrink: 0; }
.panel-hero-stats {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 16px 24px;
  backdrop-filter: blur(6px);
}
.panel-stat {
  text-align: center; padding: 0 20px;
}
.panel-stat-divider {
  width: 1px; height: 36px;
  background: rgba(255,255,255,0.25);
}
.panel-stat-num { display: block; font-size: 1.7rem; font-weight: 800; color: white; line-height: 1; }
.panel-stat-label { display: block; font-size: 0.7rem; color: rgba(255,255,255,0.65); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.07em; }

/* PANEL SECTION TITLE */
.panel-section-title {
  font-family: var(--font-display);
  font-size: 1.1rem; color: var(--v1);
  margin-bottom: 20px; font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--surface-2);
}

/* PANEL INFO CARDS REDISEÑO */
.panel-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.panel-info-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.panel-info-card:hover {
  border-color: var(--v4);
  box-shadow: 0 6px 20px -8px rgba(139,95,199,0.2);
  transform: translateY(-2px);
}
.panel-info-card-accent { border-color: rgba(139,95,199,0.3); }
.panel-info-icon-wrap {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--v2);
  transition: background .2s;
}
.panel-info-icon-accent {
  background: linear-gradient(135deg, rgba(139,95,199,0.15), rgba(244,114,182,0.12));
  color: var(--v1);
}
.panel-info-card:hover .panel-info-icon-wrap { background: rgba(139,95,199,0.1); }
.panel-info-content { flex: 1; min-width: 0; }
.panel-info-label {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-bottom: 3px;
}
.panel-info-value {
  font-size: 0.9rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* PANEL QUICK ACTIONS */
.panel-quick-actions { display: flex; flex-direction: column; gap: 10px; }
.panel-action-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  text-decoration: none; color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.panel-action-btn:hover {
  border-color: var(--v4);
  box-shadow: 0 6px 20px -8px rgba(139,95,199,0.2);
  transform: translateX(3px);
}
.pab-icon { font-size: 1.5rem; flex-shrink: 0; }
.pab-text { flex: 1; }
.pab-text strong { display: block; font-size: 0.92rem; color: var(--text); margin-bottom: 2px; }
.pab-text small { font-size: 0.78rem; color: var(--text-dim); }
.pab-arrow { color: var(--v4); flex-shrink: 0; opacity: 0.6; transition: transform .2s, opacity .2s; }
.panel-action-btn:hover .pab-arrow { transform: translateX(3px); opacity: 1; }

/* ══════════════════════════════════════════════
   CAT GRID VISUAL (tipo producto con imagen grande)
══════════════════════════════════════════════ */
.cat-grid-visual {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.cgv-card {
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  border: 1px solid var(--border);
  background: white;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.cgv-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px -12px rgba(139,95,199,0.25);
}
.cgv-img-wrap {
  position: relative;
  width: 100%; aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cgv-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease);
}
.cgv-card:hover .cgv-img { transform: scale(1.06); }
.cgv-emoji {
  font-size: 4rem; z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
  transition: transform .3s var(--ease);
}
.cgv-card:hover .cgv-emoji { transform: scale(1.1) rotate(-5deg); }
.cgv-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.12) 0%, transparent 60%);
}
.cgv-info {
  padding: 16px 18px 18px;
  flex: 1;
}
.cgv-info h3 {
  font-family: var(--font-display);
  font-size: 1.05rem; color: var(--v1);
  margin-bottom: 4px; font-weight: 700;
}
.cgv-info p {
  font-size: 0.8rem; color: var(--text-dim);
  margin-bottom: 10px; line-height: 1.5;
}
.cgv-count {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700;
  color: var(--v3);
  background: var(--surface-2);
  padding: 3px 10px; border-radius: 999px;
}

@media(max-width: 900px) {
  .cat-grid-visual { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 560px) {
  .cat-grid-visual { grid-template-columns: 1fr; }
  .panel-hero { padding: 36px 20px 32px; }
  .panel-hero-inner { gap: 16px; }
  .panel-avatar { width: 64px; height: 64px; font-size: 1.6rem; }
  .panel-hero-info h1 { font-size: 1.4rem; }
  .panel-hero-stats { width: 100%; justify-content: center; }
  .panel-info-grid { grid-template-columns: 1fr; }
}

/* CGV empty state */
.cgv-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 32px;
  background: var(--bg-section);
  border: 1.5px dashed var(--border-bright);
  border-radius: 18px;
  color: var(--text-dim);
}
.cgv-empty span { font-size: 2.8rem; display: block; margin-bottom: 14px; opacity: 0.5; }
.cgv-empty p { font-size: 0.9rem; line-height: 1.6; }
.cgv-empty a { color: var(--v3); font-weight: 600; }

/* Estado vacío cat-showcase (cuando ninguna categoría está activa en inicio) */
.cs-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 32px;
  background: var(--bg-section);
  border: 1.5px dashed var(--border-bright);
  border-radius: var(--radius);
  color: var(--text-dim);
}
.cs-empty span { font-size: 2.8rem; display: block; margin-bottom: 14px; opacity: 0.5; }
.cs-empty p { font-size: 0.9rem; line-height: 1.6; }
.cs-empty a { color: var(--v3); font-weight: 600; }