.catalog-heading-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #8b50e7;
  color: #7134d4;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.shop-hero {
  min-height: 520px;
  padding-top: 78px;      /* deja libre la franja del nav fijo */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #0b0a0f;
  color: #fff;
}

.shop-hero:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#0b0a0f 0%,transparent 65%);
  pointer-events: none;
}

.shop-hero-glow {
  width: 520px;
  height: 520px;
  position: absolute;
  top: -260px;
  right: 5%;
  border-radius: 50%;
  background: #7c3aed4a;
  filter: blur(80px);
}

.shop-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
}

.shop-hero-content > div:first-child > a {
  display: block;
  margin-bottom: 38px;
  color: #8d8994;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}

.shop-hero h1 {
  margin: 10px 0 16px;
  font-size: 48px;
  line-height: 1.06;
  letter-spacing: -.05em;
}

.shop-hero p {
  max-width: 510px;
  margin: 0;
  color: #9d98a5;
  font-size: 12px;
  line-height: 1.7;
}

/* Hero: alineacion de 4 equipos recortada y sin fondo (assets/hero-lineup.webp).
   Estatica a proposito: sin animacion ni parallax.
   Los equipos van ampliados y desbordan por abajo; el overflow:hidden
   de .shop-hero los recorta, como en la referencia. */
.shop-hero-device {
  height: 340px;                 /* mas bajo que la imagen -> desborda */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.shop-hero-device img {
  display: block;
  width: 112%;                   /* zoom: se sale del ancho de su columna */
  max-width: 640px;
  height: auto;
  margin-top: 30px;              /* cuanto baja */
  filter: drop-shadow(0 18px 40px #00000059);
}

.store-page .nav-links a.active { color: #fff; }
.store-catalog { padding-top: 85px; }
.store-help { padding: 60px 0; background: linear-gradient(120deg,#6e2bd6,#8e4bea); color: #fff; }
.store-help .container { display: flex; justify-content: space-between; align-items: center; }
.store-help .kicker { color: #e3d0ff; }.store-help h2 { margin: 8px 0; font-size: 32px; letter-spacing: -.04em; }.store-help p { margin: 0; color: #dacdeb; font-size: 11px; }


.catalog-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, #8b5cf60b, transparent 34%),
    #f8f8fa;
}

.catalog-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: 34px;
}

.catalog-intro h2 {
  max-width: 620px;
  margin: 10px 0 12px;
  font-size: 44px;
}

.catalog-intro p {
  margin: 0;
  color: #777481;
  font-size: 12px;
}

.catalog-tools {
  display: flex;
  align-items: center;
  gap: 9px;
}

.catalog-search {
  width: 290px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid #e2e0e7;
  border-radius: 10px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.catalog-search:focus-within {
  border-color: #9c6bea;
  box-shadow: 0 0 0 4px #7c3aed12;
}

.catalog-search span { color: #7c3aed; font-size: 20px; }
.catalog-search input { width: 100%; border: 0; outline: 0; font: 10px Manrope; }

.catalog-tools select {
  height: 46px;
  padding: 0 34px 0 13px;
  border: 1px solid #e2e0e7;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  color: #4f4b57;
  font: 700 9px Manrope;
}

/* Layout de tienda: filtros arriba a lo ancho, categorias fijas a la
   izquierda y la grilla de productos a la derecha. */
.catalog-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.catalog-sidebar {
  position: sticky;
  top: 96px;
  padding: 18px;
  border: 1px solid #e7e4ea;
  border-radius: 15px;
  background: #fff;
}

.sidebar-title {
  margin: 0 0 13px;
  padding-bottom: 11px;
  border-bottom: 1px solid #eceaf0;
  color: #17141b;
  font-size: 12px;
  letter-spacing: -.01em;
}

.category-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Solo en movil: el mismo filtro como <select> nativo (abre el picker del SO) */
.category-select-wrap { display: none; position: relative; }

.category-select-wrap:after {
  content: '⌄';
  position: absolute;
  right: 15px;
  top: 44%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #7c3aed;
  font-size: 15px;
  font-weight: 800;
}

.category-select-wrap select {
  width: 100%;
  height: 48px;
  padding: 0 36px 0 14px;
  border: 1px solid #e2e0e7;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  color: #17141b;
  font: 800 12px Manrope;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.category-select-wrap select:focus { border-color: #9c6bea; box-shadow: 0 0 0 4px #7c3aed12; }

.category-nav button {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #5f5b66;
  font: 800 11px Manrope;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: .2s ease;
}

.category-nav button span {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #e2dfe7;
  border-radius: 8px;
  background: #fafafc;
  color: #8b50e7;
  font-size: 10px;
  transition: .2s ease;
}

.category-nav button:hover { background: #f6f4fa; color: #17141b; }
.category-nav button.active { background: #111016; color: #fff; border-color: #111016; box-shadow: 0 10px 20px #17131f1f; }
.category-nav button.active span { background: #7c3aed; border-color: #7c3aed; color: #fff; }

.catalog-main { min-width: 0; }
/* Con la barra lateral ocupando espacio, la grilla baja de 4 a 3 columnas.
   Mas especifico que .catalog-grid para no chocar con el preview de la home. */
.catalog-layout .catalog-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.catalog-layout .catalog-meta { margin-top: 0; }

.catalog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 26px 0 18px;
  color: #85818c;
  font-size: 9px;
}

.catalog-meta p { margin: 0; }
.catalog-meta strong { color: #17141b; font-size: 13px; }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 15px;
}

.catalog-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e7e4ea;
  border-radius: 15px;
  background: #fff;
  opacity: 0;
  transform: translateY(20px) scale(.985);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s;
}

.catalog-card.is-visible { opacity: 1; transform: none; }
.catalog-card:hover { border-color: #c5a5f2; box-shadow: 0 22px 55px #32234512; }

.catalog-image {
  width: 100%;
  height: 260px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  background: linear-gradient(145deg,#f2f1f4,#fbfbfc);
  cursor: pointer;
}

.catalog-image:after {
  content: '';
  position: absolute;
  width: 130px;
  height: 18px;
  bottom: 28px;
  border-radius: 50%;
  background: #19151f25;
  filter: blur(13px);
  transition: .35s;
}

.catalog-card:hover .catalog-image:after { width: 155px; opacity: .55; }
.catalog-image img { width: 82%; height: 82%; position: relative; z-index: 1; object-fit: contain; transition: transform .45s cubic-bezier(.2,.7,.2,1); mix-blend-mode: multiply; }
.catalog-card:hover .catalog-image img { transform: translateY(-5px) scale(1.045); }

.discount {
  position: absolute;
  z-index: 3;
  top: 13px;
  left: 13px;
  padding: 6px 8px;
  border-radius: 15px;
  background: #7c3aed;
  color: #fff;
  font: 800 8px Manrope;
}

.availability {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 13px;
  color: #807c87;
  font: 700 7px Manrope;
}

.availability i { width: 5px; height: 5px; display: inline-block; margin-right: 4px; border-radius: 50%; background: #25c86b; }
.catalog-card-body { padding: 18px; }
.catalog-model { color: #8b50e7; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.catalog-card h3 { min-height: 42px; margin: 8px 0 13px; font-size: 13px; line-height: 1.55; letter-spacing: -.015em; }
.catalog-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 17px; }
.catalog-price strong { font-size: 18px; letter-spacing: -.04em; }
.catalog-price del { color: #aaa6b0; font-size: 9px; }
.choose-product { width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border: 1px solid #ded9e5; border-radius: 8px; background: #fff; color: #1c1920; font: 800 9px Manrope; cursor: pointer; transition: .25s; }
.choose-product:hover { border-color: #7c3aed; background: #7c3aed; color: #fff; }

.load-more {
  height: 46px;
  margin: 32px auto 0;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid #d9d5df;
  border-radius: 9px;
  background: #fff;
  font: 800 10px Manrope;
  cursor: pointer;
  color: #18151d;
  text-decoration: none;
}

.load-more[hidden] { display: none; }
.empty-catalog { grid-column: 1/-1; padding: 70px; border: 1px dashed #d8d3de; border-radius: 15px; text-align: center; }
.empty-catalog b,.empty-catalog span { display: block; }.empty-catalog span { margin-top: 8px; color: #88848e; font-size: 10px; }

.modal-open { overflow: hidden; }
.order-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.order-modal.open { opacity: 1; pointer-events: auto; }
.order-backdrop { position: absolute; inset: 0; background: #08070dcc; backdrop-filter: blur(10px); }
.order-dialog { width: min(920px,100%); max-height: min(720px,calc(100vh - 30px)); position: relative; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); overflow: hidden; border: 1px solid #ffffff1f; border-radius: 20px; background: #fff; box-shadow: 0 40px 120px #0008; transform: translateY(25px) scale(.98); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.order-modal.open .order-dialog { transform: none; }
.order-close { width: 36px; height: 36px; position: absolute; z-index: 3; top: 14px; right: 14px; border: 1px solid #dedbe3; border-radius: 50%; background: #fff; font-size: 21px; cursor: pointer; }
.order-product { padding: 35px; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 32%,#32224c,#111016 64%); color: #fff; }
.order-product img { width: 100%; height: 285px; padding: 10px; object-fit: contain; margin: 8px 0; border-radius: 16px; background: linear-gradient(145deg,#f2f1f4,#fbfbfc); box-shadow: 0 18px 25px #0007; }
.order-product p { margin: 0 0 5px; color: #8f8997; font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.order-product h2 { margin: 0 0 9px; font-size: 18px; line-height: 1.35; }
.order-product strong { color: #b47bff; font-size: 23px; }
.order-product small { margin-top: 14px; color: #8a8591; font-size: 8px; line-height: 1.6; }
.order-form { padding: 38px 42px; overflow-y: auto; }
.form-heading span { color: #7c3aed; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.form-heading h3 { margin: 5px 0; font-size: 24px; letter-spacing: -.035em; }.form-heading p { margin: 0 0 23px; color: #817d87; font-size: 9px; }
.order-form label { display: block; margin-bottom: 14px; color: #504c57; font-size: 9px; font-weight: 700; }
.order-form label[hidden] { display: none; }
.order-form input:not([type=radio]):not([type=checkbox]),.order-form textarea { width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid #dedbe3; border-radius: 8px; outline: 0; resize: none; font: 10px Manrope; transition: .2s; }
.order-form input:focus,.order-form textarea:focus { border-color: #9056e7 !important; box-shadow: 0 0 0 3px #7c3aed10; }
.form-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 11px; }
.order-form fieldset { margin: 0 0 14px; padding: 0; border: 0; }.order-form legend { margin-bottom: 8px; color: #504c57; font-size: 9px; font-weight: 700; }
.delivery-options { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
.delivery-options label { margin: 0; cursor: pointer; }.delivery-options input { position: absolute; opacity: 0; }
.delivery-options label>span { min-height: 59px; display: flex; flex-direction: column; justify-content: center; padding: 10px 11px; border: 1px solid #dedbe3; border-radius: 8px; transition: .2s; }
.delivery-options input:checked+span { border-color: #7c3aed; background: #7c3aed08; box-shadow: inset 0 0 0 1px #7c3aed; }
.delivery-options b,.delivery-options small { display: block; }.delivery-options b { font-size: 9px; }.delivery-options small { margin-top: 3px; color: #8c8793; font-size: 7px; font-weight: 500; }
.privacy-check { display: flex !important; gap: 8px; align-items: flex-start; color: #827e88 !important; font-size: 7px !important; font-weight: 500 !important; line-height: 1.5; }
.privacy-check input { margin-top: 1px; accent-color: #7c3aed; }
.submit-order { width: 100%; height: 47px; margin-top: 3px; }

@media(max-width:1000px){.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-layout{grid-template-columns:200px minmax(0,1fr);gap:22px}.catalog-layout .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-intro{display:block}.catalog-tools{margin-top:25px}.order-dialog{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}}

/* Bajo 860px la barra lateral no rinde: los modelos pasan a ser un desplegable.
   minmax(0,1fr) es obligatorio: un "1fr" pelado tiene minimo automatico y el
   track se estiraria al min-content de su contenido, desbordando la pagina. */
@media(max-width:860px){
  .catalog-layout{grid-template-columns:minmax(0,1fr);gap:14px}
  .catalog-layout .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Sin la tarjeta: aqui el filtro de modelos es un control mas, hermano de
     la busqueda y el orden, no una barra lateral. El titulo sobra porque la
     primera opcion ya dice "Todos los modelos" (el aria-label queda igual). */
  .catalog-sidebar{position:static;min-width:0;padding:0;border:0;border-radius:0;background:transparent}
  .sidebar-title{display:none}
  .category-nav{display:none}
  .category-select-wrap{display:block}
  .category-select-wrap select{height:46px}
  .catalog-intro{margin-bottom:8px}
}
@media(max-width:720px){.shop-hero{min-height:560px;padding:122px 0 0}.shop-hero-content{grid-template-columns:minmax(0,1fr)}.shop-hero h1{font-size:33px}.shop-hero-device{height:205px;margin-top:26px}.shop-hero-device img{width:100%;max-width:420px;margin-top:10px}.store-help .container{display:block}.store-help .btn{margin-top:22px}.catalog-heading-link{margin-top:22px}.catalog-section{padding-top:75px}.catalog-intro h2{font-size:34px}.catalog-tools{display:block}.catalog-search{width:100%}.catalog-tools select{width:100%;margin-top:8px}.catalog-grid,.catalog-layout .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.catalog-image{height:205px}.catalog-card-body{padding:13px}.catalog-card h3{font-size:11px}.catalog-meta>span{display:none}.order-modal{padding:8px}.order-dialog{max-height:calc(100vh - 16px);display:block;overflow-y:auto}.order-product{padding:23px}.order-product img{height:180px}.order-product small{display:none}.order-form{padding:27px 22px;overflow:visible}.order-close{position:fixed}.form-row{grid-template-columns:minmax(0,1fr)}.delivery-options{grid-template-columns:minmax(0,1fr)}.order-product h2{font-size:15px}}
@media(max-width:430px){.catalog-image{height:175px}.catalog-card h3{min-height:51px}.catalog-price{display:block}.catalog-price del{display:block;margin-top:3px}.choose-product{font-size:8px}.discount{top:8px;left:8px}.availability{display:none}}

@media(prefers-reduced-motion:reduce){.catalog-card,.catalog-image img,.order-dialog{transition:none!important}}