@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Inter:wght@400;600&display=swap');

:root{
  --rojo:#b30000;
  --rojo2:#ff2d2d;
  --grafito:#121212;
  --gris:#1d1d1d;
  --texto:#f1f1f1;
}

/* Fondo rojo/negro difuminado con textura */
html,body{height:100%}
body{
  margin:0; color:var(--texto); background:#0a0a0a;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden; position:relative; isolation:isolate;
}
.bg-pulse{
  position:fixed; inset:-15% -10%; z-index:-2;
  background:
    radial-gradient(800px 500px at 80% 15%, rgba(255,48,48,.15), transparent 60%),
    radial-gradient(900px 600px at 15% 85%, rgba(179,0,0,.12), transparent 62%),
    linear-gradient(180deg,#0a0a0a 0%, #0d0d0d 40%, #0b0b0b 100%);
  filter: blur(18px) saturate(120%);
  animation: drift 16s ease-in-out infinite alternate;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 700px at 78% 18%, rgba(170,0,0,.26), transparent 60%),
    radial-gradient(900px 520px at 16% 86%, rgba(180,10,10,.22), transparent 58%),
    radial-gradient(700px 420px at 40% 30%, rgba(255,40,40,.08), transparent 65%),
    linear-gradient(#0d0d0d, #0a0a0a 60%, #0c0c0c);
  filter:saturate(105%);
  animation: bgfloat 14s ease-in-out infinite alternate;
}
@keyframes bgfloat{
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-10px); }
}

/* Userbar */
.userbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 18px; background:linear-gradient(90deg,#0b0b0b, #151515 40%, #1a1a1a 70%, #1a0a0a);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky; top:0; z-index:10; backdrop-filter: blur(6px);
}
.brand{ font-family:Orbitron, sans-serif; text-decoration:none; color:#fff; letter-spacing:2px; }
.brand span{ color:#ff4da6; }
.ub-right{ display:flex; align-items:center; gap:10px; }
.avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; box-shadow:0 0 10px rgba(255,0,0,.5); }
.btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none; color:#fff; font-weight:600;
  padding:9px 14px; border-radius:12px; background: linear-gradient(180deg, #2e1b1f, #23171a);
  box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: .25s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.55), 0 0 16px rgba(255,40,40,.25); }
.btn.ghost{ background: transparent; border:1px solid rgba(255,90,90,.35); }

/* Header nav */
.header{ display:flex; justify-content:center; }
.nav{ display:flex; gap:18px; padding:14px 10px; }
.nav a{
  color:#ddd; text-decoration:none; padding:8px 10px; border-radius:8px; transition:.2s;
}
.nav a:hover{ color:#fff; background:rgba(255,255,255,.06); }

/* Hero */
.hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; align-items:center;
  padding:70px min(6vw,80px);
}
.hero-inner{ max-width:720px; }
.logo-rgb{
  font-family: Orbitron, sans-serif; font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing:.18em; margin:0 0 8px; display:inline-block;
  background: linear-gradient(90deg,#00e5ff,#6a5cff,#ff2dcf,#ff8a00,#ff3e3e,#00e5ff);
  background-size:400% 100%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation: rgbflow 4.5s linear infinite;
  text-shadow: 0 0 10px rgba(255,255,255,.15);
}
@keyframes rgbflow{ to { background-position: 100% 50%; } }
.subtitle{ margin:0 0 18px; color:#cfcfcf; opacity:.9; }
.cta{ display:flex; gap:12px; }
.btn.big{ padding:12px 18px; border-radius:14px; }
.btn.big.ghost{ border-color: rgba(255,255,255,.25); }
.hero-art{ display:flex; justify-content:center; }
.hero-art img{ width: min(520px, 90%); border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.6); }

/* Carrusel de categorías (sin hover effects) */
.carrusel{ position:relative; padding:20px min(6vw,80px) 10px; }
.carrusel h2{ margin:10px 0 14px; font-size:1.4rem; letter-spacing:.08em; color:#fff; }
.rail{
  display:grid; grid-auto-flow: column; grid-auto-columns: 180px;
  gap:16px; overflow-x:auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding:8px 4px; scrollbar-width: thin;
}
.item{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; color:#eee;
  background: linear-gradient(180deg, #171717, #131313); border-radius:16px; padding:12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  scroll-snap-align:center; transition: transform .15s ease; /* SIN efectos al hover */
}
.item img{
  width:100%; aspect-ratio: 1/1; object-fit:cover; border-radius:12px;
  background:#0f0f0f;
}
.item span{ font-weight:700; color:#ddd; }
.arrow{
  position:absolute; top:48px; transform: translateY(-50%);
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background: rgba(20,20,20,.6); color:#fff; cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.5); transition:.2s;
}
.arrow:hover{ background: rgba(40,40,40,.85); }
.arrow.left{ left: calc(min(6vw,80px) - 6px); }
.arrow.right{ right: calc(min(6vw,80px) - 6px); }

/* Productos */
.productos{ padding:20px min(6vw,80px) 60px; }
.productos h2{ margin:24px 0 16px; font-size:1.4rem; letter-spacing:.08em; }
.grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
.card{
  background: linear-gradient(180deg, #161616, #111); border-radius:16px; padding:12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
}
.card img{ width:100%; aspect-ratio: 16/10; object-fit:cover; border-radius:12px; background:#0e0e0e; }
.card h3{ margin:10px 0 4px; }
.card .desc{ margin:0 0 10px; color:#cfcfcf; opacity:.9; }
.card .actions{ display:flex; justify-content:space-between; align-items:center; }
.price{ color:#ffd7d7; font-weight:800; }
.footer{ text-align:center; color:#aaa; padding:30px 16px; border-top:1px solid rgba(255,255,255,.06); }

@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; padding-top:40px; }
  .arrow{ display:none; }
  .grid{ grid-template-columns: 1fr; }
}

/* ===== Cabecera carrusel con flechas a la derecha ===== */
.carrusel{ padding:20px min(6vw,80px) 10px; }
.c-head{
  display:flex; align-items:center; justify-content:space-between;
  margin: 6px 0 12px;
}
.c-head h2{ margin:0; font-size:1.6rem; letter-spacing:.08em; }
.arrows{ display:flex; gap:10px; }
.arrow{
  position: static; transform:none;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(20,20,20,.6); color:#fff; cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.5); transition:.2s;
}
.arrow:hover{ background: rgba(40,40,40,.85); }

/* ===== Rail con efecto constante (idle) y hover más potente ===== */
.rail{
  display:grid; grid-auto-flow: column; grid-auto-columns: 200px;
  gap:18px; overflow-x:auto; overscroll-behavior-x: contain; scroll-snap-type:x proximity;
  padding:8px 4px 2px;
}
.item{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-decoration:none; color:#eee; background: linear-gradient(180deg,#191919,#121212);
  border-radius:18px; padding:12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  scroll-snap-align:center;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  position:relative; isolation:isolate;
  /* glow sutil constante */
  animation: idleGlow 6s ease-in-out infinite alternate;
}
.item::after{
  /* destello suave que cruza la tarjeta */
  content:""; position:absolute; inset:-2px; border-radius:18px; z-index:0;
  background: linear-gradient(120deg, rgba(255,60,60,.22), rgba(255,0,0,.15), rgba(255,60,60,.22));
  opacity:.15; filter: blur(10px);
  animation: flow 10s linear infinite;
}
.item img{
  width:100%; aspect-ratio: 1/1; object-fit:cover; border-radius:14px; background:#0f0f0f;
  transform: scale(1.015);
  transition: transform .18s ease, filter .18s ease;
}
.item span{ font-weight:800; color:#eaeaea; text-shadow:0 1px 0 rgba(0,0,0,.5); }


@keyframes flow{
  0%{ background-position:0% 50%; }
  100%{ background-position:100% 50%; }
}

/* Hover potente (zoom + más glow) */
.item:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 36px rgba(0,0,0,.6), 0 0 22px rgba(255,60,60,.25);
  filter: saturate(110%);
}
.item:hover img{ transform: scale(1.04); filter: contrast(1.06) brightness(1.03); }
.item:hover::after{ opacity:.3; filter: blur(8px); }

/* ===== Marcas pro (logos uniformes) ===== */
.marcas{ padding:30px min(6vw,80px) 60px; }
.m-head h2{ margin:0 0 16px; font-size:1.4rem; letter-spacing:.08em; }
.logos{
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:16px;
}
.logo-card{
  background: linear-gradient(180deg,#171717,#121212);
  border-radius:14px; padding:14px;
  display:flex; align-items:center; justify-content:center;
  height:90px; box-shadow: 0 10px 24px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
}
.logo-card img{
  max-height:56px; max-width: 100%; object-fit: contain;
  filter: grayscale(.2) brightness(.95);
  transition: filter .2s ease, transform .2s ease;
}
.logo-card:hover img{ filter:none; transform: scale(1.04); }

@media (max-width: 980px){
  .logos{ grid-template-columns: repeat(2, 1fr); }
}

/* ===== Título “caro” (subrayado glow RGB + leve shine) ===== */
.hx{
  position:relative; display:inline-block; margin:0 0 14px;
  letter-spacing:.08em; font-weight:800;
  text-shadow:0 1px 0 rgba(0,0,0,.6), 0 0 12px rgba(255,255,255,.12);
}
.hx::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,#ff3b3b,#ffb03b,#ff3b3b);
  background-size:200% 100%;
  filter:blur(0.6px); opacity:.6; animation:hxflow 6s linear infinite;
}
@keyframes hxflow{ to{ background-position:100% 0; } }

/* ===== Carrusel premium ===== */
.carrusel{ position:relative; padding:22px min(6vw,80px) 10px; }
.c-head{ margin-bottom:8px; }

.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns: 220px;
  gap:18px; padding:10px 6px 4px; scroll-snap-type:x proximity;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }

.item{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-decoration:none; color:#eee;
  background:linear-gradient(180deg,#191919,#121212);
  border-radius:18px; padding:12px;
  box-shadow:0 14px 30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  scroll-snap-align:center;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  animation:idleGlow 6s ease-in-out infinite alternate;
}
.item::after{
  content:""; position:absolute; inset:-2px; z-index:0; border-radius:18px;
  background:linear-gradient(120deg, rgba(255,70,70,.20), rgba(255,0,0,.12), rgba(255,70,70,.20));
  opacity:.18; filter:blur(10px); pointer-events:none;
  animation:flow 10s linear infinite;
}
.item img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px; background:#0f0f0f;
  transform:scale(1.01); transition:transform .18s ease, filter .18s ease;
}
.item span{ font-weight:800; color:#eee; text-shadow:0 1px 0 rgba(0,0,0,.6); }

@keyframes idleGlow{
  0%  { box-shadow:0 14px 30px rgba(0,0,0,.55), 0 0 0 rgba(255,0,0,0); }
  100%{ box-shadow:0 14px 30px rgba(0,0,0,.55), 0 0 22px rgba(255,50,50,.18); }
}
@keyframes flow{
  0%{ background-position:0% 50%; }
  100%{ background-position:100% 50%; }
}

/* Hover potente (pero limpio) */
.item:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 20px 40px rgba(0,0,0,.6), 0 0 26px rgba(255,60,60,.25);
  filter:saturate(110%);
}
.item:hover img{ transform:scale(1.045); filter:contrast(1.06) brightness(1.03); }
.item:hover::after{ opacity:.32; filter:blur(8px); }

/* Flechas en los lados, centradas verticalmente */
.arrow.side{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(18,18,18,.75); color:#fff; cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.55); transition:.2s; z-index:2;
}
.arrow.side:hover{ background:rgba(36,36,36,.95); }
.arrow.side.left{  left: max(10px, calc(6vw - 10px)); }
.arrow.side.right{ right:max(10px, calc(6vw - 10px)); }

/* ===== Marcas: tarjetas uniformes, logos contenidos ===== */
.marcas{ padding:30px min(6vw,80px) 60px; }
.logos{
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:16px;
}
.logo-card{
  background:linear-gradient(180deg,#171717,#121212);
  border-radius:14px; padding:18px; height:110px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .18s ease, box-shadow .18s ease;
}
.logo-card img{
  max-height:64px; max-width:100%; object-fit:contain;
  filter:grayscale(.25) brightness(.95); transition:filter .18s ease, transform .18s ease;
}
.logo-card:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(0,0,0,.6); }
.logo-card:hover img{ filter:none; transform:scale(1.05); }

@media (max-width: 980px){
  .rail{ grid-auto-columns: 68vw; }
  .arrow.side{ display:none; }
  .logos{ grid-template-columns: repeat(2, 1fr); }
}


/* ===== Marcas: mismas alturas y orden limpio ===== */
.marcas{ padding:28px min(6vw,80px) 56px; }
.logos{
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:18px;
  align-items:center;
}
.logos img{
  justify-self:center; align-self:center;
  max-height:56px; max-width: 160px; /* controla tamaño */
  width:auto; height:auto; object-fit:contain;
  filter: grayscale(.15) brightness(.96);
  transition: transform .18s ease, filter .18s ease;
  background:linear-gradient(180deg,#171717,#121212);
  border-radius:14px; padding:14px 18px; box-shadow:
    0 10px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
}
.logos img:hover{
  transform: translateY(-3px) scale(1.04);
  filter:none;
  box-shadow:0 16px 34px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08);
}

@media (max-width: 1100px){
  .logos{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 600px){
  .logos{ grid-template-columns: repeat(2,1fr); }
  .logos img{ max-width: 140px; max-height: 48px; }
}