/* ============================================================
   componentes.css — Header, nav, footer, cards y componentes
   TechStore 2025
   ============================================================ */

/* ── TOP BAR ── */
.top-bar {
  background: var(--black);
  color: #ccc;
  font-size: 12.5px;
  padding: 6px 0;
}
.top-bar .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-bar a {
  color: #ccc;
  text-decoration: none;
  margin-left: 18px;
  transition: color .2s;
}
.top-bar a:hover { color: var(--orange-light); }
.promo-pills { display: flex; gap: 10px; }
.promo-pill {
  background: var(--orange);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

/* ── HEADER ── */
header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}
.logo {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.5px;
  text-decoration: none;
  white-space: nowrap;
}
.logo span { color: var(--orange); }

.search-bar {
  flex: 1;
  display: flex;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s;
}
.search-bar:focus-within { border-color: var(--orange); }
.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 16px;
  font-size: 14px;
  font-family: var(--font-body);
  background: transparent;
  color: var(--black);
}
.search-bar button {
  background: var(--orange);
  border: none;
  cursor: pointer;
  padding: 0 20px;
  color: white;
  font-size: 16px;
  transition: background .2s;
}
.search-bar button:hover { background: var(--orange-dark); }

.header-actions { display: flex; align-items: center; gap: 6px; }
.header-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-700);
  font-size: 11px;
  font-family: var(--font-body);
  border-radius: 8px;
  transition: var(--transition);
  text-decoration: none;
}
.header-btn i { font-size: 18px; }
.header-btn:hover { background: var(--orange-pale); color: var(--orange); }
.cart-btn { position: relative; }
.cart-badge {
  position: absolute;
  top: 2px;
  right: 6px;
  background: var(--orange);
  color: white;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── NAV ── */
nav {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
}
.nav-all-cats {
  background: var(--orange);
  color: white;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background .2s;
}
.nav-all-cats:hover { background: var(--orange-dark); }
.nav-link {
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gray-700);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--orange); }
.nav-link.hot { color: var(--orange); font-weight: 600; }

/* ── PRODUCT CARD ── */
.product-card {
  background: white;
  border-radius: var(--radius);
  border: 2px solid var(--gray-200);
  padding: 16px;
  cursor: pointer;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.product-card:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}
.product-img {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: var(--gray-200);
  margin-bottom: 12px;
}
.product-cat {
  font-size: 11px;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.product-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 8px;
  line-height: 1.3;
}
.product-rating { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.stars { color: #FFC107; font-size: 12px; letter-spacing: 1px; }
.product-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.price-current {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
}
.price-old {
  font-size: 13px;
  color: var(--gray-400);
  text-decoration: line-through;
}
.price-discount {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  background: var(--green-light);
  padding: 1px 6px;
  border-radius: 4px;
}
.product-installment {
  font-size: 11.5px;
  color: var(--gray-400);
  margin-bottom: 12px;
}
.product-installment strong { color: var(--orange); }
.product-actions { display: flex; gap: 8px; }
.btn-add {
  flex: 1;
  padding: 9px;
  background: var(--orange-pale);
  color: var(--orange);
  border: 1.5px solid var(--orange);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition);
}
.btn-add:hover { background: var(--orange); color: white; }
.btn-wish {
  width: 36px;
  height: 36px;
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.btn-wish:hover, .btn-wish.active {
  color: var(--orange);
  border-color: var(--orange);
  background: var(--orange-pale);
}

/* ── CATEGORY CARD ── */
.cat-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}
.cat-card:hover { border-color: var(--orange); background: var(--orange-pale); }
.cat-card:hover .cat-icon { background: var(--orange); color: white; }
.cat-icon {
  width: 48px;
  height: 48px;
  background: var(--gray-100);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--orange);
  transition: var(--transition);
}
.cat-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  text-align: center;
  line-height: 1.3;
}

/* ── FEATURES BAR ── */
.features-grid {
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.feature-item {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-right: 1px solid var(--gray-200);
}
.feature-item:last-child { border-right: none; }
.feature-icon {
  width: 40px;
  height: 40px;
  background: var(--orange-pale);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  font-size: 18px;
  flex-shrink: 0;
}
.feature-text strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--black); }
.feature-text span { font-size: 12px; color: var(--gray-400); }

/* ── PASOS DEL CHECKOUT ── */
.steps-bar { background: white; border-bottom: 1px solid var(--gray-200); }
.steps-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-400);
}
.step.active { color: var(--orange); }
.step.done { color: #4CAF50; }
.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.step.done .step-num { background: #4CAF50; border-color: #4CAF50; color: white; }
.step.active .step-num { background: var(--orange); border-color: var(--orange); color: white; }
.step-sep { width: 60px; height: 2px; background: var(--gray-200); margin: 0 8px; }
.step-sep.done { background: #4CAF50; }

/* ── SIDEBAR DE CUENTA ── */
.account-sidebar {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
}
.account-user {
  padding: 20px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 12px;
}
.account-avatar {
  width: 44px;
  height: 44px;
  background: var(--orange-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  font-size: 20px;
  flex-shrink: 0;
}
.account-name { font-size: 14px; font-weight: 700; color: var(--black); }
.account-email { font-size: 12px; color: var(--gray-400); }
.sidebar-nav { padding: 8px 0; }
.sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  font-size: 14px;
  color: var(--gray-700);
  text-decoration: none;
  transition: var(--transition);
}
.sidebar-nav li a:hover { background: var(--gray-50); color: var(--orange); }
.sidebar-nav li a.active {
  background: var(--orange-pale);
  color: var(--orange);
  font-weight: 600;
  border-left: 3px solid var(--orange);
}
.sidebar-nav li a i { width: 16px; text-align: center; }
.sidebar-logout { padding: 12px 18px; border-top: 1px solid var(--gray-100); }
.sidebar-logout a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--gray-400);
  text-decoration: none;
  transition: color .2s;
}
.sidebar-logout a:hover { color: #C62828; }

/* ── FOOTER ── */
footer {
  background: var(--black);
  color: rgba(255,255,255,0.6);
  padding: 48px 0 20px;
  margin-top: 40px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 36px;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: white;
  margin-bottom: 12px;
}
.footer-logo span { color: var(--orange); }
.footer-desc {
  font-size: 13px;
  line-height: 1.7;
  max-width: 260px;
  margin-bottom: 18px;
}
.footer-social { display: flex; gap: 10px; }
.social-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 15px;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}
.social-btn:hover { background: var(--orange); color: white; }
.footer-col h4 { font-size: 14px; font-weight: 700; color: white; margin-bottom: 14px; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  text-decoration: none;
  transition: color .2s;
}
.footer-col ul li a:hover { color: var(--orange-light); }
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 20px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}

/* ============================================================
   COMPONENTES DE PAGINAS ESPECIFICAS
   ============================================================ */

/* INICIO */
.hero { max-width:1200px; margin:24px auto; padding:0 20px; display:grid; grid-template-columns:1fr 300px; gap:16px; }
.hero-main { background:var(--black); border-radius:14px; overflow:hidden; position:relative; min-height:340px; display:flex; align-items:flex-end; padding:36px; }
.hero-bg-pattern { position:absolute; inset:0; background:linear-gradient(135deg,#1a1a1a 40%,#2d1a00 100%); }
.hero-accent { position:absolute; right:-40px; top:-40px; width:320px; height:320px; background:radial-gradient(circle,rgba(255,106,0,0.35) 0%,transparent 70%); border-radius:50%; }

/* ── ÚNICO CAMBIO: fondo transparent y sin borde ── */
.hero-img-placeholder { position:absolute; right:30px; top:50%; transform:translateY(-50%); width:220px; height:220px; background:transparent; border-radius:12px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.15); font-size:80px; border:none; }

.hero-content { position:relative; z-index:1; max-width:380px; }
.hero-tag { display:inline-block; background:var(--orange); color:white; font-size:11px; font-weight:700; padding:3px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.hero-title { font-family:var(--font-display); font-size:46px; font-weight:800; color:white; line-height:1.05; margin-bottom:10px; }
.hero-title span { color:var(--orange-light); }
.hero-subtitle { color:rgba(255,255,255,0.6); font-size:14px; margin-bottom:22px; }
.hero-cta { background:var(--orange); color:white; border:none; cursor:pointer; font-family:var(--font-display); font-size:17px; font-weight:700; padding:12px 28px; border-radius:var(--radius); text-transform:uppercase; letter-spacing:0.5px; transition:all .2s; text-decoration:none; display:inline-block; }
.hero-cta:hover { background:var(--orange-light); transform:translateY(-1px); }
.hero-side { display:flex; flex-direction:column; gap:16px; }
.side-banner { flex:1; border-radius:12px; padding:22px 20px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; cursor:pointer; min-height:155px; transition:transform .2s; }
.side-banner:hover { transform:translateY(-2px); }
.side-banner.orange { background:linear-gradient(135deg,var(--orange-pale) 0%,#FFD9B8 100%); }
.side-banner.dark { background:linear-gradient(135deg,#2a2a2a 0%,#3d1f00 100%); }
.side-banner-icon { position:absolute; right:14px; top:14px; font-size:48px; opacity:0.18; }
.side-banner.orange .side-banner-icon { color:var(--orange); }
.side-banner.dark .side-banner-icon { color:var(--orange-light); }
.side-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.side-banner.orange .side-label { color:var(--orange); }
.side-banner.dark .side-label { color:var(--orange-light); }
.side-title { font-family:var(--font-display); font-size:22px; font-weight:800; line-height:1.1; }
.side-banner.orange .side-title { color:var(--black); }
.side-banner.dark .side-title { color:white; }
.features-bar { max-width:1200px; margin:0 auto 28px; padding:0 20px; }
.section { max-width:1200px; margin:0 auto 36px; padding:0 20px; }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.product-wishlist { position:absolute; top:10px; right:10px; width:30px; height:30px; background:white; border-radius:50%; border:1px solid var(--gray-200); display:flex; align-items:center; justify-content:center; color:var(--gray-400); font-size:13px; cursor:pointer; transition:all .2s; }
.product-wishlist:hover { color:var(--orange); border-color:var(--orange); }
.cat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.promo-banner { max-width:1200px; margin:0 auto 36px; padding:0 20px; }
.promo-inner { background:var(--black); border-radius:14px; padding:32px 40px; display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden; }
.promo-glow { position:absolute; left:-80px; top:-80px; width:300px; height:300px; background:radial-gradient(circle,rgba(255,106,0,0.3) 0%,transparent 70%); pointer-events:none; }
.promo-text { position:relative; z-index:1; }
.promo-eyebrow { font-size:12px; font-weight:600; color:var(--orange-light); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:8px; }
.promo-heading { font-family:var(--font-display); font-size:36px; font-weight:800; color:white; line-height:1.1; }
.promo-heading span { color:var(--orange-light); }
.promo-sub { color:rgba(255,255,255,0.5); font-size:14px; margin-top:8px; }
.promo-cta { position:relative; z-index:1; background:var(--orange); color:white; border:none; cursor:pointer; font-family:var(--font-display); font-size:18px; font-weight:700; padding:14px 36px; border-radius:var(--radius); text-transform:uppercase; letter-spacing:0.5px; transition:all .2s; text-decoration:none; display:inline-block; }
.promo-cta:hover { background:var(--orange-light); transform:scale(1.03); }

/* CATALOGO */
.shop-layout { max-width:1200px; margin:16px auto 40px; padding:0 20px; display:grid; grid-template-columns:260px 1fr; gap:24px; }
.sidebar { display:flex; flex-direction:column; gap:16px; }
.filter-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; }
.filter-header { padding:14px 18px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; user-select:none; }
.filter-title { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--black); }
.filter-toggle { color:var(--gray-400); font-size:12px; transition:transform .25s; }
.filter-toggle.open { transform:rotate(180deg); }
.filter-body { padding:4px 18px 16px; border-top:1px solid var(--gray-100); }
.cat-list { list-style:none; }
.cat-list li { display:flex; justify-content:space-between; align-items:center; }
.cat-list li a { display:flex; align-items:center; gap:8px; padding:7px 0; font-size:13.5px; color:var(--gray-700); text-decoration:none; transition:color .2s; flex:1; }
.cat-list li a:hover, .cat-list li a.active { color:var(--orange); }
.cat-list li a.active { font-weight:600; }
.cat-list li a i { width:16px; text-align:center; font-size:13px; color:var(--orange); opacity:.7; }
.cat-count { font-size:11px; color:var(--gray-400); background:var(--gray-100); padding:1px 7px; border-radius:10px; }
.price-inputs { display:flex; gap:8px; margin-top:10px; }
.price-input { flex:1; }
.price-input label { display:block; font-size:11px; color:var(--gray-400); margin-bottom:4px; }
.price-input input { width:100%; padding:7px 10px; border:1.5px solid var(--gray-200); border-radius:7px; font-size:13px; font-family:var(--font-body); outline:none; transition:border-color .2s; }
.price-input input:focus { border-color:var(--orange); }
.btn-apply { width:100%; margin-top:12px; padding:9px; background:var(--orange); color:white; border:none; border-radius:7px; font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer; transition:background .2s; }
.btn-apply:hover { background:var(--orange-dark); }
.check-list { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.check-item { display:flex; align-items:center; gap:9px; cursor:pointer; }
.check-item input[type="checkbox"] { width:16px; height:16px; accent-color:var(--orange); cursor:pointer; }
.check-item span { font-size:13.5px; color:var(--gray-700); }
.check-item:hover span { color:var(--orange); }
.rating-list { display:flex; flex-direction:column; gap:7px; margin-top:4px; }
.rating-item { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--gray-700); }
.rating-item:hover { color:var(--orange); }
.stars { color:#FFC107; font-size:12px; letter-spacing:1px; }
.main-area { display:flex; flex-direction:column; gap:16px; }
.toolbar { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.toolbar-left { display:flex; align-items:center; gap:12px; }
.results-count { font-size:14px; color:var(--gray-700); }
.results-count strong { color:var(--black); }
.active-filters { display:flex; gap:8px; flex-wrap:wrap; }
.filter-tag { display:flex; align-items:center; gap:6px; background:var(--orange-pale); color:var(--orange); font-size:12px; font-weight:500; padding:3px 10px; border-radius:20px; }
.filter-tag button { background:none; border:none; cursor:pointer; color:var(--orange); font-size:11px; padding:0; line-height:1; }
.toolbar-right { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.sort-select { padding:7px 12px; border:1.5px solid var(--gray-200); border-radius:7px; font-family:var(--font-body); font-size:13px; color:var(--gray-700); outline:none; cursor:pointer; transition:border-color .2s; }
.sort-select:focus { border-color:var(--orange); }
.view-btns { display:flex; gap:4px; }
.view-btn { width:32px; height:32px; border:1.5px solid var(--gray-200); border-radius:6px; background:none; cursor:pointer; color:var(--gray-400); font-size:13px; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.view-btn.active, .view-btn:hover { border-color:var(--orange); color:var(--orange); background:var(--orange-pale); }
.product-grid.list-view { grid-template-columns:1fr; }
.product-grid.list-view .product-card { display:grid; grid-template-columns:160px 1fr auto; gap:20px; align-items:center; }
.product-grid.list-view .product-img { height:130px; margin-bottom:0; font-size:52px; }
.product-grid.list-view .product-info { display:flex; flex-direction:column; }
.product-grid.list-view .product-actions { flex-direction:column; align-items:stretch; min-width:160px; }
.product-grid.list-view .product-badge { top:12px; left:172px; }

/* PRODUCTO */
.product-layout { max-width:1200px; margin:20px auto; padding:0 20px; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.gallery { display:flex; flex-direction:column; gap:12px; }
.gallery-main { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); height:380px; display:flex; align-items:center; justify-content:center; font-size:120px; color:var(--gray-200); position:relative; overflow:hidden; }
.gallery-badge { position:absolute; top:14px; left:14px; background:#FFEBEE; color:#C62828; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; text-transform:uppercase; }
.gallery-thumbs { display:flex; gap:10px; }
.thumb { width:72px; height:72px; background:white; border:2px solid var(--gray-200); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--gray-300); cursor:pointer; transition:all .2s; }
.thumb.active, .thumb:hover { border-color:var(--orange); }
.product-info { display:flex; flex-direction:column; gap:16px; }
.product-brand { font-size:12px; font-weight:600; color:var(--orange); text-transform:uppercase; letter-spacing:1px; }
.product-title { font-family:var(--font-display); font-size:28px; font-weight:800; line-height:1.15; color:var(--black); }
.product-rating { display:flex; align-items:center; gap:8px; }
.rating-count { font-size:13px; color:var(--gray-400); }
.rating-link { font-size:13px; color:var(--orange); text-decoration:none; }
.price-block { display:flex; flex-direction:column; gap:6px; }
.price-old { font-size:14px; color:var(--gray-400); text-decoration:line-through; }
.price-current { font-family:var(--font-display); font-size:30px; font-weight:800; color:var(--black); line-height:1; }
.price-discount-tag { display:inline-flex; align-items:center; gap:5px; background:#E8F5E9; color:#2E7D32; font-size:13px; font-weight:700; padding:3px 10px; border-radius:20px; width:fit-content; }
.price-installment { font-size:15px; color:var(--gray-700); }
.price-installment strong { color:var(--orange); font-size:17px; }
.cuotas-box { background:var(--orange-pale); border:1px solid #FFD4B0; border-radius:var(--radius); padding:14px 16px; }
.cuotas-title { font-size:13px; font-weight:600; color:var(--orange-dark); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.cuotas-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cuota-item { background:white; border-radius:7px; padding:8px 10px; text-align:center; border:1px solid #FFD4B0; }
.cuota-num { font-size:12px; font-weight:700; color:var(--orange); }
.cuota-val { font-size:11px; color:var(--gray-700); }
.stock-row { display:flex; align-items:center; gap:8px; font-size:14px; }
.stock-dot { width:10px; height:10px; border-radius:50%; background:#4CAF50; flex-shrink:0; }
.stock-dot.low { background:#FF9800; }
.envio-row { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--gray-700); }
.envio-row i { color:var(--orange); margin-top:2px; }
.cantidad-row { display:flex; align-items:center; gap:12px; }
.cantidad-label { font-size:14px; font-weight:600; color:var(--gray-700); }
.cantidad-ctrl { display:flex; align-items:center; border:1.5px solid var(--gray-200); border-radius:8px; overflow:hidden; }
.cantidad-btn { width:36px; height:36px; background:var(--gray-100); border:none; cursor:pointer; font-size:16px; color:var(--gray-700); transition:background .2s; }
.cantidad-btn:hover { background:var(--orange-pale); color:var(--orange); }
.cantidad-num { width:40px; text-align:center; font-size:15px; font-weight:600; border:none; outline:none; font-family:var(--font-body); }
.btn-comprar { flex:1; padding:14px; background:var(--orange); color:white; border:none; border-radius:var(--radius); font-family:var(--font-display); font-size:19px; font-weight:700; cursor:pointer; transition:all .2s; text-transform:uppercase; letter-spacing:0.5px; }
.btn-comprar:hover { background:var(--orange-dark); transform:translateY(-1px); }
.btn-carrito { padding:14px 20px; background:white; color:var(--orange); border:2px solid var(--orange); border-radius:var(--radius); font-family:var(--font-display); font-size:19px; font-weight:700; cursor:pointer; transition:all .2s; text-transform:uppercase; }
.btn-carrito:hover { background:var(--orange-pale); }
.btn-wish-lg { width:50px; height:50px; background:white; border:1.5px solid var(--gray-200); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--gray-400); font-size:20px; cursor:pointer; transition:all .2s; flex-shrink:0; }
.btn-wish-lg:hover { color:var(--orange); border-color:var(--orange); }
.action-row { display:flex; gap:10px; align-items:stretch; }
.product-detail { max-width:1200px; margin:32px auto; padding:0 20px; }
.tabs { display:flex; gap:0; border-bottom:2px solid var(--gray-200); margin-bottom:24px; }
.tab-btn { padding:12px 24px; background:none; border:none; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--gray-400); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; }
.tab-btn.active, .tab-btn:hover { color:var(--orange); }
.tab-btn.active { border-bottom-color:var(--orange); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.desc-text { font-size:15px; line-height:1.8; color:var(--gray-700); max-width:800px; }
.desc-text p { margin-bottom:12px; }
.features-list { list-style:none; margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.features-list li { display:flex; align-items:flex-start; gap:8px; font-size:14px; color:var(--gray-700); }
.features-list li i { color:var(--orange); margin-top:2px; flex-shrink:0; }
.specs-table { width:100%; border-collapse:collapse; max-width:700px; }
.specs-table tr:nth-child(even) { background:var(--gray-50); }
.specs-table td { padding:11px 16px; font-size:14px; border-bottom:1px solid var(--gray-100); }
.specs-table td:first-child { font-weight:600; color:var(--gray-700); width:200px; }
.related { max-width:1200px; margin:0 auto 48px; padding:0 20px; }
.related-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.price-current-sm { font-family:var(--font-display); font-size:20px; font-weight:800; color:var(--black); }
.btn-add-sm { width:100%; margin-top:10px; padding:8px; background:var(--orange-pale); color:var(--orange); border:1.5px solid var(--orange); border-radius:8px; cursor:pointer; font-family:var(--font-body); font-size:13px; font-weight:600; transition:all .2s; }
.btn-add-sm:hover { background:var(--orange); color:white; }

/* CARRITO */
.cart-layout { max-width:1200px; margin:24px auto 48px; padding:0 20px; display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:start; }
.cart-items { display:flex; flex-direction:column; gap:12px; }
.cart-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.cart-title { font-family:var(--font-display); font-size:24px; font-weight:800; }
.cart-count { font-size:14px; color:var(--gray-400); }
.clear-btn { background:none; border:none; cursor:pointer; color:var(--gray-400); font-size:13px; font-family:var(--font-body); transition:color .2s; }
.clear-btn:hover { color:#C62828; }
.cart-item { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); padding:16px; display:grid; grid-template-columns:90px 1fr auto; gap:16px; align-items:center; transition:border-color .2s; }
.cart-item:hover { border-color:var(--orange); }
.item-img { width:90px; height:90px; background:var(--gray-50); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:40px; color:var(--gray-300); }
.item-info { display:flex; flex-direction:column; gap:4px; }
.item-brand { font-size:11px; color:var(--orange); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.item-name { font-size:14px; font-weight:600; color:var(--black); line-height:1.35; }
.item-meta, .item-installment { font-size:12px; color:var(--gray-400); }
.item-installment strong { color:var(--orange); }
.item-actions { display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.item-price { font-family:var(--font-display); font-size:22px; font-weight:800; color:var(--black); white-space:nowrap; }
.item-price-old { font-size:12px; color:var(--gray-400); text-decoration:line-through; text-align:right; }
.item-controls { display:flex; align-items:center; gap:10px; }
.qty-ctrl { display:flex; align-items:center; border:1.5px solid var(--gray-200); border-radius:7px; overflow:hidden; }
.qty-btn { width:30px; height:30px; background:var(--gray-100); border:none; cursor:pointer; font-size:14px; color:var(--gray-700); transition:background .2s; }
.qty-btn:hover { background:var(--orange-pale); color:var(--orange); }
.qty-num { width:34px; text-align:center; font-size:14px; font-weight:600; border:none; outline:none; font-family:var(--font-body); background:white; }
.remove-btn { background:none; border:none; cursor:pointer; color:var(--gray-400); font-size:14px; transition:color .2s; padding:4px; }
.remove-btn:hover { color:#C62828; }
.coupon-box { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); padding:16px; display:flex; gap:10px; }
.coupon-input { flex:1; padding:9px 14px; border:1.5px solid var(--gray-200); border-radius:8px; font-size:14px; font-family:var(--font-body); outline:none; transition:border-color .2s; }
.coupon-input:focus { border-color:var(--orange); }
.coupon-btn { padding:9px 20px; background:var(--black); color:white; border:none; border-radius:8px; font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer; transition:background .2s; white-space:nowrap; }
.coupon-btn:hover { background:var(--gray-700); }
.summary-row { display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--gray-700); margin-bottom:12px; }
.summary-row.discount, .summary-row.shipping, .summary-row.free { color:#2E7D32; }
.summary-divider { height:1px; background:var(--gray-200); margin:14px 0; }
.summary-total { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.total-label { font-size:16px; font-weight:700; }
.total-amount { font-family:var(--font-display); font-size:32px; font-weight:800; color:var(--black); }
.total-installment { font-size:13px; color:var(--gray-400); text-align:right; margin-bottom:18px; }
.total-installment strong { color:var(--orange); }
.btn-checkout { width:100%; padding:15px; background:var(--orange); color:white; border:none; border-radius:var(--radius); font-family:var(--font-display); font-size:20px; font-weight:700; cursor:pointer; transition:all .2s; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; }
.btn-checkout:hover { background:var(--orange-dark); transform:translateY(-1px); }
.btn-continue { width:100%; padding:12px; background:white; color:var(--black); border:1.5px solid var(--gray-200); border-radius:var(--radius); font-family:var(--font-body); font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; text-decoration:none; display:block; text-align:center; }
.btn-continue:hover { border-color:var(--orange); color:var(--orange); }
.secure-badges { display:flex; justify-content:center; gap:16px; margin-top:16px; padding-top:16px; border-top:1px solid var(--gray-100); }
.secure-badge { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--gray-400); }
.secure-badge i { color:#4CAF50; }
.payment-methods { margin-top:14px; padding-top:14px; border-top:1px solid var(--gray-100); }
.payment-label { font-size:12px; color:var(--gray-400); margin-bottom:8px; }
.payment-icons { display:flex; gap:6px; flex-wrap:wrap; }
.pay-icon { background:var(--gray-100); border-radius:5px; padding:4px 8px; font-size:11px; font-weight:600; color:var(--gray-700); }

/* CHECKOUT */
.checkout-layout { max-width:1200px; margin:24px auto 48px; padding:0 20px; display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:start; }
.section-card { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); padding:24px; margin-bottom:16px; }
.section-card-title { font-family:var(--font-display); font-size:20px; font-weight:800; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.section-card-title i { color:var(--orange); font-size:18px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group.span2 { grid-column:span 2; }
.shipping-options, .payment-options { display:flex; flex-direction:column; gap:10px; }
.shipping-option, .payment-option { border:1.5px solid var(--gray-200); border-radius:var(--radius); padding:14px 16px; cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:14px; }
.shipping-option:hover, .payment-option:hover { border-color:var(--orange); }
.shipping-option.selected, .payment-option.selected { border-color:var(--orange); background:var(--orange-pale); }
.shipping-option input[type="radio"], .payment-option input[type="radio"] { accent-color:var(--orange); width:18px; height:18px; flex-shrink:0; }
.shipping-info { flex:1; }
.shipping-name, .payment-name { font-size:14px; font-weight:600; color:var(--black); }
.shipping-desc { font-size:12px; color:var(--gray-400); margin-top:2px; }
.shipping-price { font-size:14px; font-weight:700; }
.shipping-price.free { color:#2E7D32; }
.payment-options { margin-bottom:18px; }
.payment-icon-box { width:40px; height:26px; background:var(--gray-100); border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--gray-700); }
.card-form { background:var(--gray-50); border-radius:8px; padding:16px; margin-top:4px; display:none; }
.card-form.visible { display:block; }
.card-number-group { position:relative; }
.card-number-group i { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--gray-400); font-size:20px; }
.summary-items { margin-bottom:16px; display:flex; flex-direction:column; gap:12px; }
.summary-item { display:flex; align-items:center; gap:10px; }
.summary-item-img { width:46px; height:46px; background:var(--gray-100); border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--gray-400); flex-shrink:0; position:relative; }
.summary-item-qty { position:absolute; top:-5px; right:-5px; background:var(--orange); color:white; font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.summary-item-name { flex:1; font-size:12.5px; color:var(--gray-700); line-height:1.35; }
.summary-item-price { font-size:13px; font-weight:700; white-space:nowrap; }
.btn-pay { width:100%; padding:15px; background:var(--orange); color:white; border:none; border-radius:var(--radius); font-family:var(--font-display); font-size:20px; font-weight:700; cursor:pointer; transition:all .2s; text-transform:uppercase; }
.btn-pay:hover { background:var(--orange-dark); transform:translateY(-1px); }
.secure-note { display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; color:var(--gray-400); margin-top:12px; }
.secure-note i { color:#4CAF50; }

/* CONFIRMACION */
.page-wrap { max-width:860px; margin:36px auto 56px; padding:0 20px; display:flex; flex-direction:column; gap:20px; }
.confirm-hero { background:white; border:1px solid var(--gray-200); border-radius:14px; padding:40px 36px; text-align:center; position:relative; overflow:hidden; }
.confirm-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--green) 0%,#66BB6A 100%); }
.confirm-icon { width:80px; height:80px; background:var(--green-light); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:36px; color:var(--green); }
.confirm-title { font-family:var(--font-display); font-size:36px; font-weight:800; color:var(--black); margin-bottom:8px; }
.confirm-subtitle { font-size:15px; color:var(--gray-700); margin-bottom:20px; line-height:1.6; }
.order-number { display:inline-flex; align-items:center; gap:8px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:8px; padding:10px 20px; font-size:14px; color:var(--gray-700); }
.order-number strong { font-family:var(--font-display); font-size:18px; color:var(--black); }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.info-card { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); padding:20px; }
.info-card-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--orange); margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.info-row { display:flex; justify-content:space-between; align-items:flex-start; font-size:14px; padding:7px 0; border-bottom:1px solid var(--gray-100); gap:12px; }
.info-row:last-child { border-bottom:none; }
.info-label { color:var(--gray-400); flex-shrink:0; }
.info-value { font-weight:600; text-align:right; }
.info-value.green { color:var(--green); }
.info-value.orange { color:var(--orange); }
.order-items-card { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); padding:20px; }
.order-items-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--orange); margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.order-item { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--gray-100); }
.order-item:last-child { border-bottom:none; }
.order-item-img { width:52px; height:52px; background:var(--gray-50); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--gray-300); flex-shrink:0; }
.order-item-info { flex:1; }
.order-item-brand { font-size:11px; color:var(--orange); font-weight:600; text-transform:uppercase; }
.order-item-name { font-size:13.5px; font-weight:600; color:var(--black); line-height:1.3; }
.order-item-qty { font-size:12px; color:var(--gray-400); }
.order-item-price { font-family:var(--font-display); font-size:20px; font-weight:800; white-space:nowrap; }
.order-total-row { display:flex; justify-content:space-between; align-items:center; padding-top:14px; margin-top:4px; }
.order-total-label { font-size:15px; font-weight:700; }
.order-total-amount { font-family:var(--font-display); font-size:28px; font-weight:800; }
.tracking-card { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); padding:20px; }
.tracking-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--orange); margin-bottom:18px; display:flex; align-items:center; gap:7px; }
.tracking-steps { display:flex; flex-direction:column; gap:0; }
.tracking-step { display:flex; gap:16px; align-items:flex-start; }
.tracking-step-left { display:flex; flex-direction:column; align-items:center; }
.tracking-dot { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.tracking-dot.done { background:var(--green-light); color:var(--green); border:2px solid #A5D6A7; }
.tracking-dot.current { background:var(--orange-pale); color:var(--orange); border:2px solid #FFCC99; }
.tracking-dot.pending { background:var(--gray-100); color:var(--gray-400); border:2px solid var(--gray-200); }
.tracking-line { width:2px; height:28px; background:var(--gray-200); margin:3px auto; }
.tracking-line.done { background:#A5D6A7; }
.tracking-content { padding-bottom:24px; }
.tracking-step-title { font-size:14px; font-weight:600; color:var(--black); }
.tracking-step-title.pending { color:var(--gray-400); }
.tracking-step-desc { font-size:12px; color:var(--gray-400); margin-top:2px; }
.tracking-step-time { font-size:11px; color:var(--orange); font-weight:600; margin-top:3px; }
.actions-card { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); padding:20px; }
.actions-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--orange); margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.actions-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.action-btn { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; border:1.5px solid var(--gray-200); border-radius:var(--radius); background:white; cursor:pointer; text-decoration:none; transition:all .2s; color:var(--gray-700); }
.action-btn:hover { border-color:var(--orange); color:var(--orange); background:var(--orange-pale); }
.action-btn i { font-size:22px; }
.action-btn span { font-size:12.5px; font-weight:600; text-align:center; line-height:1.3; }

/* MI CUENTA */
.panel { background:white; border:1px solid var(--gray-200); border-radius:14px; overflow:hidden; }
.account-tabs { display:flex; border-bottom:2px solid var(--gray-200); }
.account-tab { flex:1; padding:14px; background:none; border:none; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--gray-400); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; }
.account-tab.active { color:var(--orange); border-bottom-color:var(--orange); }
.tab-content { display:none; padding:24px; }
.tab-content.active { display:block; }
.form-input-wrap { position:relative; }
.input-icon { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--gray-400); font-size:15px; cursor:pointer; }
.input-icon:hover { color:var(--orange); }
.form-hint { font-size:12px; color:var(--gray-400); margin-top:3px; }
.forgot-row { display:flex; justify-content:flex-end; margin-top:-8px; margin-bottom:14px; }
.forgot-link { font-size:13px; color:var(--orange); text-decoration:none; font-weight:500; }
.forgot-link:hover { text-decoration:underline; }
.btn-primary { width:100%; padding:13px; background:var(--orange); color:white; border:none; border-radius:var(--radius); font-family:var(--font-display); font-size:18px; font-weight:700; cursor:pointer; transition:all .2s; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:14px; }
.btn-primary:hover { background:var(--orange-dark); transform:translateY(-1px); }
.btn-social { width:100%; padding:11px; background:white; color:var(--gray-700); border:1.5px solid var(--gray-200); border-radius:var(--radius); font-family:var(--font-body); font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px; }
.btn-social:hover { border-color:var(--orange); color:var(--orange); }
.btn-social.google:hover { border-color:#DB4437; color:#DB4437; }
.divider-or { display:flex; align-items:center; gap:10px; margin:16px 0; color:var(--gray-400); font-size:13px; }
.divider-or::before, .divider-or::after { content:''; flex:1; height:1px; background:var(--gray-200); }
.check-group { display:flex; align-items:flex-start; gap:9px; margin-bottom:16px; }
.check-group input { width:16px; height:16px; accent-color:var(--orange); margin-top:2px; flex-shrink:0; }
.check-group label { font-size:13px; color:var(--gray-700); line-height:1.5; }
.check-group a { color:var(--orange); text-decoration:none; }
.benefits-panel { background:var(--black); border-radius:14px; padding:32px 28px; color:white; position:sticky; top:20px; }
.benefits-title { font-family:var(--font-display); font-size:28px; font-weight:800; color:white; margin-bottom:6px; line-height:1.1; }
.benefits-title span { color:var(--orange-light); }
.benefits-subtitle { font-size:14px; color:rgba(255,255,255,0.5); margin-bottom:28px; }
.benefit-item { display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; }
.benefit-icon { width:42px; height:42px; background:rgba(255,106,0,0.15); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--orange-light); font-size:18px; flex-shrink:0; }
.benefit-text strong { display:block; font-size:14px; font-weight:700; color:white; margin-bottom:2px; }
.benefit-text span { font-size:13px; color:rgba(255,255,255,0.5); line-height:1.4; }
.benefits-divider { height:1px; background:rgba(255,255,255,0.08); margin:24px 0; }
.trust-row { display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,0.4); margin-bottom:10px; }
.trust-row i { color:#4CAF50; }

/* CONTACTO */
.contact-hero { background:var(--black); padding:48px 20px; text-align:center; margin-bottom:0; }
.contact-hero-inner { max-width:600px; margin:0 auto; }
.contact-hero h1 { font-family:var(--font-display); font-size:42px; font-weight:800; color:white; margin-bottom:10px; }
.contact-hero h1 span { color:var(--orange-light); }
.contact-hero p { font-size:15px; color:rgba(255,255,255,0.55); line-height:1.7; }
.quick-channels { max-width:1200px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; transform:translateY(-28px); }
.channel-card { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); padding:22px 20px; display:flex; align-items:center; gap:16px; cursor:pointer; text-decoration:none; transition:all .2s; }
.channel-card:hover { border-color:var(--orange); transform:translateY(-3px); box-shadow:0 6px 20px rgba(255,106,0,0.12); }
.channel-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.channel-icon.wa { background:#E8F8EE; color:#25D366; }
.channel-icon.email { background:var(--orange-pale); color:var(--orange); }
.channel-icon.phone { background:#E8F0FB; color:#1877F2; }
.channel-info strong { display:block; font-size:14px; font-weight:700; color:var(--black); margin-bottom:2px; }
.channel-info span { font-size:12.5px; color:var(--gray-400); }
.channel-info .channel-val { font-size:13.5px; color:var(--orange); font-weight:600; margin-top:3px; display:block; }
.contact-layout { max-width:1200px; margin:0 auto 56px; padding:0 20px; display:grid; grid-template-columns:1fr 380px; gap:24px; }
.form-card { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); padding:28px; }
.form-card-title { font-family:var(--font-display); font-size:24px; font-weight:800; margin-bottom:6px; }
.form-card-sub { font-size:14px; color:var(--gray-400); margin-bottom:22px; }
.char-count { font-size:11px; color:var(--gray-400); text-align:right; margin-top:3px; }
.btn-send { width:100%; padding:14px; background:var(--orange); color:white; border:none; border-radius:var(--radius); font-family:var(--font-display); font-size:19px; font-weight:700; cursor:pointer; transition:all .2s; text-transform:uppercase; letter-spacing:0.5px; margin-top:18px; display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-send:hover { background:var(--orange-dark); transform:translateY(-1px); }
.success-msg { display:none; background:#E8F5E9; border:1px solid #A5D6A7; border-radius:var(--radius); padding:18px 20px; margin-top:16px; color:#2E7D32; font-size:14px; font-weight:600; align-items:center; gap:10px; }
.success-msg.show { display:flex; }
.info-sidebar { display:flex; flex-direction:column; gap:16px; }
.info-card { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); padding:20px; }
.info-card-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--orange); margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.info-row { display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-bottom:1px solid var(--gray-100); font-size:14px; }
.info-row:last-child { border-bottom:none; }
.info-row i { color:var(--orange); margin-top:2px; width:16px; flex-shrink:0; }
.info-row-text strong { display:block; font-weight:600; color:var(--black); margin-bottom:1px; }
.info-row-text span { color:var(--gray-400); font-size:13px; }
.horario-grid { display:flex; flex-direction:column; gap:6px; }
.horario-item { display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0; border-bottom:1px solid var(--gray-100); }
.horario-item:last-child { border-bottom:none; }
.horario-dia { color:var(--gray-700); font-weight:500; }
.horario-hs { color:var(--black); font-weight:600; }
.horario-hs.cerrado { color:var(--gray-400); font-weight:400; }
.faq-card { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; }
.faq-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--orange); padding:18px 20px 14px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--gray-100); }
.faq-item { border-bottom:1px solid var(--gray-100); }
.faq-item:last-child { border-bottom:none; }
.faq-question { padding:14px 20px; font-size:14px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:color .2s; }
.faq-question:hover, .faq-item.open .faq-question { color:var(--orange); }
.faq-question i { font-size:11px; color:var(--gray-400); transition:transform .25s; }
.faq-answer { padding:0 20px 14px; font-size:13.5px; color:var(--gray-700); line-height:1.7; display:none; }
.faq-item.open .faq-question i { transform:rotate(180deg); color:var(--orange); }
.faq-item.open .faq-answer { display:block; }

/* MIS PEDIDOS */
.page-layout { max-width:1200px; margin:24px auto 56px; padding:0 20px; display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start; }
.main-content { display:flex; flex-direction:column; gap:16px; }
.content-header { display:flex; justify-content:space-between; align-items:center; }
.content-title { font-family:var(--font-display); font-size:26px; font-weight:800; }
.content-count { font-size:14px; color:var(--gray-400); }
.filter-tabs { display:flex; gap:6px; }
.filter-tab { padding:7px 14px; border:1.5px solid var(--gray-200); border-radius:20px; background:white; font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--gray-700); cursor:pointer; transition:all .2s; }
.filter-tab:hover, .filter-tab.active { border-color:var(--orange); color:var(--orange); background:var(--orange-pale); }
.order-card { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; transition:border-color .2s; }
.order-card:hover { border-color:var(--orange); }
.order-card-header { padding:16px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--gray-100); flex-wrap:wrap; gap:10px; }
.order-num { font-size:14px; font-weight:700; color:var(--black); }
.order-date { font-size:13px; color:var(--gray-400); }
.order-status { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:4px 12px; border-radius:20px; }
.status-entregado { background:#E8F5E9; color:#2E7D32; }
.status-camino { background:#E3F2FD; color:#1565C0; }
.status-preparacion { background:var(--orange-pale); color:var(--orange-dark); }
.status-cancelado { background:#FFEBEE; color:#C62828; }
.order-card-body { padding:16px 20px; }
.order-products { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.order-product { display:flex; align-items:center; gap:12px; }
.order-prod-img { width:46px; height:46px; background:var(--gray-50); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--gray-300); flex-shrink:0; }
.order-prod-info { flex:1; }
.order-prod-name { font-size:13.5px; font-weight:600; color:var(--black); line-height:1.3; }
.order-prod-qty { font-size:12px; color:var(--gray-400); }
.order-prod-price { font-family:var(--font-display); font-size:17px; font-weight:800; white-space:nowrap; }
.order-card-footer { padding:14px 20px; border-top:1px solid var(--gray-100); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.order-total { font-size:14px; color:var(--gray-700); }
.order-total strong { font-family:var(--font-display); font-size:20px; color:var(--black); }
.order-actions { display:flex; gap:8px; }
.btn-ver { padding:8px 16px; background:var(--orange); color:white; border:none; border-radius:7px; font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer; transition:background .2s; text-decoration:none; display:inline-block; }
.btn-ver:hover { background:var(--orange-dark); }
.btn-recomprar { padding:8px 16px; background:white; color:var(--orange); border:1.5px solid var(--orange); border-radius:7px; font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
.btn-recomprar:hover { background:var(--orange-pale); }
.order-tracking-mini { display:flex; align-items:center; gap:0; margin-top:4px; }
.track-step { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; }
.track-dot { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; }
.track-dot.done { background:#E8F5E9; color:#2E7D32; border:1.5px solid #A5D6A7; }
.track-dot.current { background:var(--orange-pale); color:var(--orange); border:1.5px solid #FFCC99; }
.track-dot.pending { background:var(--gray-100); color:var(--gray-400); border:1.5px solid var(--gray-200); }
.track-label { font-size:10px; color:var(--gray-400); text-align:center; }
.track-label.active { color:var(--orange); font-weight:600; }
.track-line { flex:1; height:2px; background:var(--gray-200); margin-bottom:12px; }
.track-line.done { background:#A5D6A7; }

/* FAVORITOS */
.btn-clear { padding:7px 16px; background:white; color:#C62828; border:1.5px solid #FFCDD2; border-radius:7px; font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
.btn-clear:hover { background:#FFEBEE; }
.favs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.fav-card { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); padding:16px; transition:all .25s; position:relative; }
.fav-card:hover { border-color:var(--orange); box-shadow:0 6px 24px rgba(255,106,0,0.12); transform:translateY(-2px); }
.fav-remove { position:absolute; top:10px; right:10px; width:28px; height:28px; background:white; border:1px solid var(--gray-200); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gray-400); font-size:11px; cursor:pointer; transition:all .2s; }
.fav-remove:hover { background:#FFEBEE; color:#C62828; border-color:#FFCDD2; }
.fav-badge { position:absolute; top:10px; left:10px; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; text-transform:uppercase; }
.fav-img { height:130px; display:flex; align-items:center; justify-content:center; font-size:56px; color:var(--gray-200); margin-bottom:12px; }
.fav-cat { font-size:11px; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px; }
.fav-name { font-size:13.5px; font-weight:600; color:var(--black); margin-bottom:8px; line-height:1.3; }
.fav-prices { display:flex; align-items:baseline; gap:7px; margin-bottom:4px; flex-wrap:wrap; }
.price-disc { font-size:11px; font-weight:700; color:#2E7D32; background:#E8F5E9; padding:1px 6px; border-radius:4px; }
.fav-install { font-size:11.5px; color:var(--gray-400); margin-bottom:12px; }
.fav-install strong { color:var(--orange); }
.fav-actions { display:flex; gap:8px; }
.btn-view { padding:9px 12px; background:white; color:var(--gray-700); border:1.5px solid var(--gray-200); border-radius:8px; cursor:pointer; font-size:13px; transition:all .2s; text-decoration:none; display:flex; align-items:center; }
.btn-view:hover { border-color:var(--orange); color:var(--orange); }

/* 404 */
.hero-404 { flex:1; display:flex; align-items:center; justify-content:center; padding:60px 20px; }
.hero-inner { text-align:center; max-width:560px; }
.number-404 { font-family:var(--font-display); font-size:160px; font-weight:800; line-height:1; color:var(--black); position:relative; display:inline-block; margin-bottom:8px; }
.number-404 .highlight { color:var(--orange); }
.icon-404 { font-size:52px; color:var(--orange); margin-bottom:20px; display:block; }
.title-404 { font-family:var(--font-display); font-size:34px; font-weight:800; color:var(--black); margin-bottom:10px; }
.sub-404 { font-size:15px; color:var(--gray-400); line-height:1.7; margin-bottom:32px; }
.search-404 { display:flex; border:2px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; margin-bottom:24px; transition:border-color .2s; }
.search-404:focus-within { border-color:var(--orange); }
.search-404 input { flex:1; border:none; outline:none; padding:12px 16px; font-size:14px; font-family:var(--font-body); background:white; }
.search-404 button { background:var(--orange); border:none; cursor:pointer; padding:0 22px; color:white; font-size:16px; transition:background .2s; }
.search-404 button:hover { background:var(--orange-dark); }
.links-404 { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:36px; }
.link-pill { display:flex; align-items:center; gap:7px; padding:9px 18px; background:white; border:1.5px solid var(--gray-200); border-radius:20px; font-size:13.5px; font-weight:600; color:var(--gray-700); text-decoration:none; transition:all .2s; }
.link-pill:hover { border-color:var(--orange); color:var(--orange); background:var(--orange-pale); }
.link-pill i { font-size:13px; color:var(--orange); }
.btn-home { display:inline-flex; align-items:center; gap:10px; padding:14px 32px; background:var(--orange); color:white; border-radius:var(--radius); font-family:var(--font-display); font-size:19px; font-weight:700; text-decoration:none; transition:all .2s; text-transform:uppercase; }
.btn-home:hover { background:var(--orange-dark); transform:translateY(-1px); }

/* NOSOTROS */
.about-hero { background:var(--black); padding:64px 20px; position:relative; overflow:hidden; }
.about-hero::after { content:''; position:absolute; right:-100px; top:-100px; width:400px; height:400px; background:radial-gradient(circle,rgba(255,106,0,0.25) 0%,transparent 70%); border-radius:50%; pointer-events:none; }
.about-hero-inner { max-width:700px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.about-tag { display:inline-block; background:rgba(255,106,0,0.2); color:var(--orange-light); font-size:12px; font-weight:700; padding:4px 14px; border-radius:20px; text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
.about-hero h1 { font-family:var(--font-display); font-size:48px; font-weight:800; color:white; line-height:1.1; margin-bottom:14px; }
.about-hero h1 span { color:var(--orange-light); }
.about-hero p { font-size:16px; color:rgba(255,255,255,0.55); line-height:1.8; }
.stats-bar { background:white; border-bottom:1px solid var(--gray-200); }
.stats-inner { max-width:1200px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item { padding:28px 20px; text-align:center; border-right:1px solid var(--gray-200); }
.stat-item:last-child { border-right:none; }
.stat-num { font-family:var(--font-display); font-size:40px; font-weight:800; color:var(--orange); line-height:1; margin-bottom:4px; }
.stat-label { font-size:13px; color:var(--gray-400); }
.section-label { font-size:12px; font-weight:700; color:var(--orange); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:10px; }
.section-text { font-size:15px; color:var(--gray-700); line-height:1.9; max-width:680px; }
.section-text p { margin-bottom:14px; }
.historia-layout { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.historia-img { background:var(--gray-100); border-radius:14px; height:320px; display:flex; align-items:center; justify-content:center; font-size:96px; color:var(--gray-300); }
.valores-bg { background:var(--gray-50); border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); }
.valores-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
.valor-card { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); padding:26px 22px; transition:all .2s; }
.valor-card:hover { border-color:var(--orange); transform:translateY(-3px); box-shadow:0 6px 20px rgba(255,106,0,0.1); }
.valor-icon { width:52px; height:52px; background:var(--orange-pale); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:22px; margin-bottom:16px; }
.valor-title { font-family:var(--font-display); font-size:20px; font-weight:800; margin-bottom:8px; }
.valor-text { font-size:14px; color:var(--gray-700); line-height:1.7; }
.equipo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px; }
.miembro-card { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); padding:24px 16px; text-align:center; transition:all .2s; }
.miembro-card:hover { border-color:var(--orange); transform:translateY(-3px); }
.miembro-avatar { width:72px; height:72px; border-radius:50%; background:var(--orange-pale); display:flex; align-items:center; justify-content:center; font-size:30px; color:var(--orange); margin:0 auto 14px; }
.miembro-name { font-size:15px; font-weight:700; color:var(--black); margin-bottom:3px; }
.miembro-rol { font-size:12.5px; color:var(--orange); font-weight:600; margin-bottom:10px; }
.miembro-bio { font-size:13px; color:var(--gray-400); line-height:1.6; }
.cta-section { background:var(--black); padding:56px 20px; text-align:center; }
.cta-inner { max-width:560px; margin:0 auto; }
.cta-title { font-family:var(--font-display); font-size:38px; font-weight:800; color:white; margin-bottom:10px; }
.cta-title span { color:var(--orange-light); }
.cta-sub { font-size:15px; color:rgba(255,255,255,0.5); margin-bottom:28px; }
.cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-cta-primary { padding:13px 28px; background:var(--orange); color:white; border-radius:var(--radius); font-family:var(--font-display); font-size:18px; font-weight:700; text-decoration:none; transition:all .2s; text-transform:uppercase; }
.btn-cta-primary:hover { background:var(--orange-light); }
.btn-cta-secondary { padding:13px 28px; background:transparent; color:white; border:1.5px solid rgba(255,255,255,0.3); border-radius:var(--radius); font-family:var(--font-display); font-size:18px; font-weight:700; text-decoration:none; transition:all .2s; text-transform:uppercase; }
.btn-cta-secondary:hover { border-color:white; }

/* Fix alineación product-card */
.product-card { display:flex; flex-direction:column; }
.product-card .product-name { flex:1; }
.product-card .product-actions { margin-top:auto; }

/* Paginación */
.pagination { display:flex; gap:6px; justify-content:center; margin-top:24px; flex-wrap:wrap; }
.page-btn { min-width:36px; height:36px; padding:0 10px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--gray-200); border-radius:8px; background:white; color:var(--gray-700); font-size:14px; font-weight:600; font-family:var(--font-body); text-decoration:none; cursor:pointer; transition:all .2s; }
.page-btn:hover { border-color:var(--orange); color:var(--orange); background:var(--orange-pale); }
.page-btn.active { background:var(--orange); border-color:var(--orange); color:white; }
.page-btn.disabled { opacity:0.4; cursor:not-allowed; pointer-events:none; }

.social-wrap { position: relative; display: inline-block; }
.proximamente-toast {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); background: #1A1A1A; color: white;
  font-size: 11px; font-weight: 600; padding: 5px 10px;
  border-radius: 6px; white-space: nowrap; opacity: 0;
  pointer-events: none; transition: opacity .2s; z-index: 10;
}
.proximamente-toast::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); border: 5px solid transparent;
  border-top-color: #1A1A1A;
}
.proximamente-toast.show { opacity: 1; }

.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-block;
  width: fit-content;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
}
.badge-sale { background: #FFF3E0; color: var(--orange-dark); }
.badge-new  { background: #E8F5E9; color: #2E7D32; }

#toast-proximamente {
  position: fixed; bottom: 100px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1A1A1A; color: white;
  padding: 14px 24px; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,106,0,0.3);
  opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; z-index: 9999; white-space: nowrap;
}
#toast-proximamente.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast-proximamente i { color: #FF6A00; font-size: 18px; }