/* ============================================================
   TACTICAL ABOS — HOJA DE ESTILOS COMPARTIDA
   Este archivo controla el diseño de TODO el sitio (index,
   categorías, carrito y admin). Para cambiar colores, edita
   las variables en :root.
============================================================= */
:root{
  --bg: #0b0b0c;
  --bg-alt: #131315;
  --line: rgba(255,255,255,0.09);
  --white: #f2f2f0;
  --muted: #8f9092;
  --accent: #f5760d;
  --accent-dim: rgba(245,118,13,0.14);
  --danger: #e5484d;
  --ok: #3fb950;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--bg);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
input, select, textarea{ font-family: inherit; }

.mono{ font-family: 'JetBrains Mono', monospace; }

/* ================= HEADER / NAV ================= */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 56px);
  background: rgba(11,11,12,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.logo{
  display:flex;
  align-items:center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.logo svg{ flex-shrink:0; }
nav.links{
  display:flex;
  gap: 34px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
}
nav.links a{
  color: var(--muted);
  position:relative;
  padding-bottom: 4px;
  transition: color .15s ease;
}
nav.links a:hover, nav.links a.active{ color: var(--white); }
nav.links a.active{
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--accent);
}
.nav-right{ display:flex; align-items:center; gap: 14px; }
.icon-btn{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  color: var(--white);
}
.icon-btn .badge{
  position:absolute; top:-4px; right:-4px;
  background: var(--accent);
  color:#1a0d02;
  font-size: 9px; font-weight:700;
  width:16px; height:16px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace;
}
.icon-btn .badge:empty,
.icon-btn .badge[data-count="0"]{ display:none; }
.burger{
  display:none;
  width:38px; height:38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:transparent;
  color: var(--white);
  align-items:center; justify-content:center;
}
.mobile-drawer{
  display:none;
  flex-direction:column;
  gap: 2px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  padding: 6px clamp(20px,5vw,56px) 18px;
}
.mobile-drawer a{
  padding: 12px 4px;
  font-family:'JetBrains Mono',monospace;
  font-size: 14px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.mobile-drawer.open{ display:flex; }

/* ================= HERO ================= */
.hero{ position: relative; min-height: 70vh; display:flex; flex-direction:column; }
.hero-top{
  padding: clamp(46px,8vw,76px) clamp(20px,5vw,56px) clamp(28px,5vw,40px);
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 24px; position: relative; z-index: 3;
}
.hero-heading{ flex: 1; min-width: 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size: 12px;
  color: var(--accent); letter-spacing: 0.12em; margin-bottom: 14px;
}
.eyebrow::before{ content:''; width:7px; height:7px; background: var(--accent); border-radius:50%; display:inline-block; }
h1.headline{
  font-family: 'Anton', sans-serif; font-weight: 400; line-height: 0.92;
  letter-spacing: 0.005em; font-size: clamp(52px, 9.5vw, 128px);
  text-transform: uppercase; outline: none;
}
h1.headline .accent-word{
  background: linear-gradient(92deg, var(--white) 55%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-actions{ display:flex; flex-direction:column; align-items: flex-end; gap: 14px; flex-shrink:0; }
.cta-btn{
  background: var(--accent); color: #1a0d02;
  font-family:'JetBrains Mono',monospace; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 14px 26px;
  border-radius: 3px; border: none; display:inline-block; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-dim); }
.cta-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.hero-sub{ max-width: 320px; text-align: right; color: var(--muted); font-size: 14px; line-height: 1.5; outline: none; }
.hero-media{
  position: relative; flex: 1; min-height: 300px; border-top: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(245,118,13,0.10), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 26px), #111113;
}
.hero-media img{ width:100%; height:100%; object-fit: cover; display:block; }
.hero-media::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, var(--bg) 0%, transparent 26%); pointer-events:none; }

/* ================= CATALOGO / CARRUSEL (index) ================= */
.catalog{ padding: clamp(56px,8vw,90px) 0 clamp(60px,9vw,100px); border-top: 1px solid var(--line); }
.catalog-head{ padding: 0 clamp(20px,5vw,56px); margin-bottom: 34px; display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; flex-wrap: wrap; }
.catalog-head h2{ font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size: clamp(30px,4.2vw,46px); letter-spacing: 0.01em; }
.catalog-head p{ color: var(--muted); font-size: 13.5px; font-family:'JetBrains Mono',monospace; max-width: 320px; }
.carousel-outer{ position: relative; }
.carousel-wrapper{ position: relative; width: 100%; overflow: hidden; padding: 4px 0 30px;
  mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent); }
.carousel-arrow{
  position: absolute; top: 0; bottom: 30px; z-index: 6;
  width: 44px; display:flex; align-items:center; justify-content:center;
  background: transparent; border: none; padding: 0; color: #fff;
}
.carousel-arrow-left{ left: 2px; justify-content: flex-start; }
.carousel-arrow-right{ right: 2px; justify-content: flex-end; }
.carousel-arrow svg{
  width: 34px; height: 34px; padding: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(2px);
  transition: background .15s ease, transform .15s ease;
}
.carousel-arrow:hover svg{ background: rgba(255,255,255,0.32); transform: scale(1.06); }
.carousel-arrow:active svg{ transform: scale(0.96); }
@media (max-width: 420px){
  .carousel-arrow{ width: 34px; }
  .carousel-arrow svg{ width: 26px; height: 26px; padding: 6px; }
}
.carousel-track{ display: flex; gap: 20px; width: max-content; cursor: grab; user-select: none; -webkit-user-select: none; padding: 0 clamp(20px,5vw,56px); }
.carousel-track:active{ cursor: grabbing; }
.carousel-item{ flex: 0 0 200px; text-align: center; text-decoration: none; display: block; transition: transform 0.2s ease; -webkit-user-drag: none; }
.carousel-item:hover{ transform: translateY(-4px); }
.image-box{ width: 200px; height: 200px; background-color: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.image-box img{ width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.carousel-text{ margin-top: 10px; font-family:'JetBrains Mono',monospace; font-size: 13px; letter-spacing: 0.04em; color: var(--white); font-weight: 500; }
.catalog-hint{ text-align:center; color: var(--muted); font-size: 11.5px; font-family:'JetBrains Mono',monospace; margin-top: 4px; }

/* ================= PAGINAS DE CATEGORIA ================= */
.content-area{ padding: clamp(40px,6vw,64px) clamp(20px,5vw,56px) clamp(60px,8vw,90px); min-height: 60vh; }
.page-title{ font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size: clamp(32px,5vw,56px); letter-spacing: 0.01em; }
.page-title .accent-word{ color: var(--accent); }
.page-empty-note{ color: var(--muted); font-size: 14px; margin-top: 10px; max-width: 520px; }

.product-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; margin-top: 40px; }
.grid-item{ text-align: center; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display:flex; flex-direction:column; }
.grid-image-box{ position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background-color: rgba(255,255,255,0.04); display:block; }
.grid-image-box img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .2s ease; }
.grid-text{ margin-top: 10px; font-family:'JetBrains Mono',monospace; font-size: 12.5px; letter-spacing: 0.03em; color: var(--white); font-weight: 500; min-height: 32px; }
.grid-price{ margin-top: 6px; font-family:'JetBrains Mono',monospace; font-weight:700; color: var(--accent); font-size: 15px; }
.grid-add-btn{
  margin-top: 10px; width:100%; background: var(--accent); color:#1a0d02; border:none; border-radius: 6px;
  padding: 9px 10px; font-family:'JetBrains Mono',monospace; font-weight:700; font-size: 12px; text-transform:uppercase;
  letter-spacing: .03em; transition: transform .12s ease;
}
.grid-add-btn:hover{ transform: translateY(-2px); }
.grid-add-btn:disabled{ background: var(--line); color: var(--muted); cursor:not-allowed; transform:none; }

.stock-badge{ position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #1a0d02;
  font-family:'JetBrains Mono',monospace; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.agotado-overlay{ position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.55);
  font-family:'JetBrains Mono',monospace; font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; color: #fff; }
.grid-item.agotado .grid-image-box img{ filter: blur(1.5px) grayscale(0.6) brightness(.6); }
.grid-item.agotado .stock-badge{ display:none; }
.grid-item.agotado .agotado-overlay{ display:flex; }

.empty-state{ color: var(--muted); font-family:'JetBrains Mono',monospace; font-size: 13.5px; padding: 30px 0; }

/* ================= CARRITO ================= */
.cart-wrap{ max-width: 760px; margin: 0 auto; }
.cart-item{ display:flex; gap:14px; align-items:center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-item img{ width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--line); flex-shrink:0; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-name{ font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; }
.cart-item-price{ color: var(--accent); font-family:'JetBrains Mono',monospace; font-size:12.5px; margin-top:4px; }
.qty-ctrl{ display:flex; align-items:center; gap:8px; }
.qty-ctrl button{ width:26px; height:26px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--white); font-weight:700; }
.qty-ctrl span{ min-width:18px; text-align:center; font-family:'JetBrains Mono',monospace; }
.cart-item-remove{ color: var(--danger); font-family:'JetBrains Mono',monospace; font-size:11.5px; margin-left:10px; }
.cart-summary{ margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-family:'JetBrains Mono',monospace; font-size: 18px; font-weight:700; }

.pay-options{ display:flex; gap:12px; margin-top: 22px; flex-wrap: wrap; }
.pay-option{ flex:1; min-width:160px; border:1px solid var(--line); border-radius:10px; padding:14px; background: var(--bg-alt); text-align:center; font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; }
.pay-option.selected{ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pay-details{ margin-top:18px; background: var(--bg-alt); border:1px solid var(--line); border-radius:10px; padding:18px; }
.pay-details h4{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color: var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
.bank-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px dashed var(--line); font-size:13.5px; }
.bank-row:last-child{ border-bottom:none; }
.copy-btn{ background:transparent; border:1px solid var(--line); color:var(--white); border-radius:6px; padding:4px 8px; font-size:11px; font-family:'JetBrains Mono',monospace; }
.copy-btn:hover{ border-color: var(--accent); color: var(--accent); }
.whatsapp-btn{ margin-top:18px; width:100%; background:#25D366; color:#04210f; border:none; border-radius:8px; padding:14px; font-weight:700; font-family:'JetBrains Mono',monospace; font-size:14px; text-transform:uppercase; }
.whatsapp-btn:hover{ filter:brightness(1.05); }

/* ================= ADMIN / LOGIN ================= */
.login-wrap{ max-width: 380px; margin: 90px auto; padding: 30px clamp(20px,5vw,32px); background: var(--bg-alt); border:1px solid var(--line); border-radius: 14px; }
.login-wrap h2{ font-family:'Anton',sans-serif; text-transform:uppercase; margin-bottom: 18px; }
.field{ margin-bottom: 14px; }
.field label{ display:block; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em; }
.field input, .field select, .field textarea{
  width:100%; background:#0f0f10; border:1px solid var(--line); color:var(--white); border-radius:8px; padding:10px 12px; font-size:14px;
}
.field textarea{ resize: vertical; min-height: 60px; }
.btn{ background: var(--accent); color:#1a0d02; border:none; border-radius: 8px; padding: 11px 18px; font-weight:700; font-family:'JetBrains Mono',monospace; font-size:13px; text-transform:uppercase; letter-spacing:.03em; }
.btn.secondary{ background: transparent; border:1px solid var(--line); color: var(--white); }
.btn.danger{ background: var(--danger); color:#fff; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.error-msg{ color: var(--danger); font-size: 13px; margin-top: 8px; font-family:'JetBrains Mono',monospace; }
.ok-msg{ color: var(--ok); font-size: 13px; margin-top: 8px; font-family:'JetBrains Mono',monospace; }

.admin-shell{ max-width: 1100px; margin: 0 auto; padding: 30px clamp(16px,4vw,40px) 80px; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 26px; flex-wrap:wrap; gap:12px; }
.admin-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 24px; }
.admin-tab{ padding:9px 16px; border-radius: 20px; border:1px solid var(--line); font-family:'JetBrains Mono',monospace; font-size:12.5px; background:transparent; color:var(--muted); }
.admin-tab.active{ background: var(--accent); color:#1a0d02; border-color: var(--accent); }
.admin-panel{ display:none; }
.admin-panel.active{ display:block; }
.admin-card{ background: var(--bg-alt); border:1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.admin-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 14px; }
.admin-product-card{ background:#0f0f10; border:1px solid var(--line); border-radius: 10px; padding: 12px; }
.admin-product-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; margin-bottom:8px; }
.admin-product-card .name{ font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600; }
.admin-product-card .meta{ color:var(--muted); font-size:11.5px; margin-top:4px; font-family:'JetBrains Mono',monospace; }
.admin-product-card .actions{ display:flex; gap:8px; margin-top:10px; }
.admin-product-card .actions button{ flex:1; font-size:11px; padding:7px; border-radius:6px; }
.row-flex{ display:flex; gap:12px; flex-wrap:wrap; }
.row-flex .field{ flex:1; min-width:140px; }
.bank-edit-row{ display:flex; gap:8px; margin-bottom:8px; align-items:center; }
.bank-edit-row .field{ margin-bottom:0; flex:1; }
.toggle-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }

/* ---- Vista de catálogo (copia literal del sitio real + controles de edición) ---- */
.catalog-preview-note{ color:var(--muted); font-size:12px; font-family:'JetBrains Mono',monospace; margin-bottom:14px; }

.admin-cat-tabs{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.admin-cat-tabs button{
  background:none; border:none; color: var(--muted); font-family:'JetBrains Mono',monospace;
  font-size:13px; text-transform:lowercase; letter-spacing:.02em; padding:4px 0; cursor:pointer;
  border-bottom:2px solid transparent;
}
.admin-cat-tabs button:hover{ color: var(--white); }
.admin-cat-tabs button.active{ color: var(--white); border-bottom-color: var(--accent); }

/* ---- Tarjeta "+ Agregar producto" (siempre al final de la cuadrícula) ---- */
.add-product-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: transparent; border: 2px dashed var(--line); border-radius: 14px; padding: 12px;
  min-height: 100%; cursor:pointer; color: var(--muted); font-family:'JetBrains Mono',monospace;
  transition: border-color .15s ease, color .15s ease;
}
.add-product-card .grid-image-box{ width:100%; aspect-ratio:1/1; border-radius:10px; display:flex; align-items:center; justify-content:center; border:none; background:none; }
.add-product-card .plus-icon{ font-size:40px; line-height:1; color: var(--muted); }
.add-product-card .add-label{ margin-top:10px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.add-product-card:hover{ border-color: var(--accent); color: var(--accent); }
.add-product-card:hover .plus-icon{ color: var(--accent); }

.admin-live-grid .grid-item{ position:relative; cursor:grab; }

/* En reposo, la tarjeta se ve EXACTAMENTE como en el sitio real. */
.admin-live-grid .preview-pos-badge,
.admin-live-grid .preview-order-btns,
.admin-live-grid .preview-edit-overlay{ opacity:0; transition: opacity .15s ease; }

/* Los controles solo aparecen al pasar el mouse (o al tocar en celular). */
.admin-live-grid .grid-item:hover .preview-pos-badge,
.admin-live-grid .grid-item:hover .preview-order-btns,
.admin-live-grid .grid-item:hover .preview-edit-overlay,
.admin-live-grid .grid-item.touched .preview-pos-badge,
.admin-live-grid .grid-item.touched .preview-order-btns,
.admin-live-grid .grid-item.touched .preview-edit-overlay{ opacity:1; }

.admin-live-grid .grid-item:hover{ box-shadow: 0 0 0 1px var(--accent); }

/* Mientras se arrastra: queda un "hueco" punteado en el lugar original. */
.admin-live-grid .grid-item.dragging{
  opacity:0.45;
  border: 1.5px dashed var(--accent) !important;
  box-shadow:none;
}
.admin-live-grid .grid-item.dragging .preview-pos-badge,
.admin-live-grid .grid-item.dragging .preview-order-btns{ opacity:0; }
.admin-live-grid .grid-item.dragging .preview-edit-overlay{ opacity:1; }

.admin-live-grid .grid-add-btn{ pointer-events:none; opacity:0.55; } /* en admin es solo visual, no vende aquí */
.preview-pos-badge{ position:absolute; top:6px; left:6px; background:rgba(0,0,0,0.75); color:var(--white); font-family:'JetBrains Mono',monospace; font-size:10.5px; padding:2px 7px; border-radius:20px; z-index:3; }
.preview-order-btns{ position:absolute; top:6px; right:6px; display:flex; flex-direction:column; gap:3px; z-index:3; }
.preview-order-btns button{ width:22px; height:22px; line-height:1; border-radius:5px; border:1px solid var(--line); background:rgba(0,0,0,0.75); color:var(--white); font-size:11px; padding:0; }
.preview-order-btns button:hover{ border-color:var(--accent); color:var(--accent); }
.preview-order-btns button:disabled{ opacity:0.3; }
.preview-edit-overlay{ position:absolute; inset:0 0 auto 0; top:auto; bottom:0; z-index:3; display:flex; }
.preview-edit-overlay button{ width:100%; font-size:10.5px; padding:6px; border-radius:0 0 10px 10px; background:rgba(0,0,0,0.8); border:1px solid var(--line); color:var(--white); }
.preview-edit-overlay button:hover{ color:var(--accent); border-color:var(--accent); }

/* ---- Formulario de producto con preview en vivo ---- */
.product-form-layout{ display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start; }
.product-form-fields{ flex:1 1 320px; min-width:280px; }
.product-form-preview{ flex:0 0 200px; position:sticky; top:16px; }
.product-form-preview .preview-caption{ text-align:center; color:var(--muted); font-size:11px; font-family:'JetBrains Mono',monospace; margin-top:8px; }
.product-form-preview .position-controls{ display:flex; gap:8px; margin-top:12px; }
.product-form-preview .position-controls button{ flex:1; font-size:11px; padding:8px 4px; }
.product-form-preview .position-label{ text-align:center; font-size:11px; color:var(--muted); font-family:'JetBrains Mono',monospace; margin-top:6px; }

.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background: var(--accent); color:#1a0d02; padding:12px 20px; border-radius: 8px;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; z-index:200; box-shadow:0 8px 24px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

/* ================= RECORTE DE IMAGEN (CROPPER) ================= */
.cropper-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; }
.cropper-modal{ background:var(--bg-alt); border:1px solid var(--line); border-radius:14px; padding:20px; max-width:460px; width:100%; }
.cropper-title{ font-family:'JetBrains Mono',monospace; font-size:15px; margin-bottom:6px; }
.cropper-hint{ color:var(--muted); font-size:12.5px; margin-bottom:14px; font-family:'JetBrains Mono',monospace; }
.cropper-stage{ position:relative; overflow:hidden; border-radius:10px; border:1px solid var(--line); background:#0a0a0b; margin:0 auto 14px; touch-action:none; cursor:grab; }
.cropper-stage:active{ cursor:grabbing; }
.cropper-img{ position:absolute; top:0; left:0; max-width:none; pointer-events:none; user-select:none; }
.cropper-zoom{ width:100%; margin-bottom:16px; accent-color: var(--accent); }
.cropper-actions{ display:flex; gap:10px; justify-content:flex-end; }

/* ================= FRANJA DE INFO (envío / atención / pago) ================= */
.info-strip{
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  padding: clamp(28px,4vw,38px) clamp(20px,5vw,56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px 32px;
}
.info-strip-item{ display:flex; gap:14px; align-items:flex-start; }
.info-strip-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color: var(--accent); background: var(--accent-dim);
}
.info-strip-body h3{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; margin-bottom:5px; color: var(--white);
}
.info-strip-body p{ color: var(--muted); font-size:12.5px; line-height:1.5; }

/* ================= FOOTER ================= */
footer{ border-top: 1px solid var(--line); padding: 30px clamp(20px,5vw,56px); display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap; gap: 18px; }
footer .logo{ font-size: 14px; }
footer address{ font-style:normal; font-family:'JetBrains Mono',monospace; font-size: 13px; color: #c7c7c5; }
.socials{ display:flex; gap: 12px; }
.socials:empty{ display:none; }
.socials a{ width: 30px; height: 30px; border-radius: 50%; background: #17171a; border: 1px solid var(--line); display:flex; align-items:center; justify-content:center; color: var(--white); }
.socials a:hover{ border-color: var(--accent); color: var(--accent); }
.copyright{ width:100%; text-align:center; color: var(--muted); font-size: 12px; font-family:'JetBrains Mono',monospace; padding-top: 20px; border-top: 1px solid var(--line); margin-top: 6px; }

/* ================= RESPONSIVE ================= */
@media (max-width: 860px){
  nav.links{ display:none; }
  .burger{ display:flex; }
  .hero-top{ flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero-actions{ align-items: flex-start; width: 100%; }
  .hero-sub{ text-align: left; max-width: 100%; }
  h1.headline{ text-align:left; }
  .cta-btn{ width: 100%; text-align:center; }
  .hero-media{ min-height: 260px; }
  footer{ flex-direction: column; align-items: flex-start; }
  .socials{ order: 3; }
}
@media (max-width: 420px){
  .image-box, .carousel-item{ width: 150px; }
  .image-box{ height: 150px; }
}