/* ============================================================
   HMEDIAPRODUCER — Tienda de Recursos + Panel Admin
   Mismo sistema visual: oscuro, ámbar #F59E0B, verde #22C55E
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body {
  background: #060608;
  color: #D4D4DC;
  font-family: 'Courier New', Courier, monospace;
  overflow-x: hidden;
  min-height: 100vh;
}
a, button, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #F59E0B; outline-offset: 3px; }
::selection { background: #B45309; color: #FAFAFF; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #0C0C0F; }
::-webkit-scrollbar-thumb { background: #252528; }

h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; color: #FAFAFF; }
button { font-family: inherit; }

/* ---------- Nav ---------- */
nav {
  position: sticky; top: 0; z-index: 200;
  height: 64px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 40px;
  background: rgba(6, 6, 8, 0.88); backdrop-filter: blur(20px);
  border-bottom: 1px solid #252528;
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-text {
  font-family: 'Playfair Display', Georgia, serif; font-size: 16px;
  letter-spacing: 0.14em; color: #FAFAFF; font-weight: 700; line-height: 1.2;
}
.logo-text span { color: #F59E0B; }
.logo-sub { font-size: 13px; letter-spacing: 0.22em; color: #22C55E; opacity: 0.8; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-link {
  font-size: 15px; letter-spacing: 0.2em; color: #A8A8B4;
  cursor: pointer; text-decoration: none; transition: color 0.2s;
}
.nav-link:hover { color: #F59E0B; }
.nav-link.active { color: #F59E0B; }

/* ---------- Lang toggle ---------- */
.lang-toggle {
  position: fixed; top: 80px; right: 20px; z-index: 201;
  display: flex; gap: 4px; background: rgba(6, 6, 8, 0.8);
  backdrop-filter: blur(10px); border: 1px solid #252528; padding: 4px;
}
.lang-btn {
  background: transparent; border: none; color: #78787F;
  font-family: 'Courier New', monospace; font-size: 15px; letter-spacing: 0.1em;
  padding: 6px 12px; cursor: pointer; transition: color 0.3s, background-color 0.3s;
}
.lang-btn.active { background: #F59E0B; color: #060608; }

/* ---------- Header ---------- */
.store-header { padding: 90px 40px 40px; max-width: 1200px; margin: 0 auto; }
.store-tag { font-size: 14px; color: #22C55E; letter-spacing: 0.28em; margin-bottom: 20px; text-transform: uppercase; }
.store-title { font-size: clamp(34px, 5.5vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.store-title span { color: transparent; -webkit-text-stroke: 1.5px #F59E0B; font-style: italic; }
.store-desc { max-width: 480px; font-size: 16px; color: #A8A8B4; line-height: 1.9; margin-top: 18px; }

/* ---------- Grid de productos ---------- */
.catalog { max-width: 1200px; margin: 0 auto; padding: 20px 40px 100px; }
.catalog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;
}
.empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: #78787F; }

.product-card {
  background: #0C0C0F; border: 1px solid #252528; overflow: hidden;
  display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s, box-shadow 0.4s;
}
.product-card:hover {
  transform: translateY(-6px); border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 24px 48px rgba(0,0,0,0.8), 0 0 24px rgba(245, 158, 11, 0.12);
}
.product-cover {
  position: relative; height: 180px; background: #111114;
  border-bottom: 1px solid #1C1C20; display: flex; align-items: center; justify-content: center;
}
.product-cover img { width: 100%; height: 100%; object-fit: cover; }
.product-cover .ph {
  font-family: 'Playfair Display', Georgia, serif; font-size: 60px; font-weight: 700;
  color: rgba(245, 158, 11, 0.25);
}
.product-badge {
  position: absolute; top: 12px; left: 12px; background: rgba(6,6,8,0.85);
  border: 1px solid rgba(34, 197, 94, 0.4); color: #22C55E;
  font-size: 14px; letter-spacing: 0.18em; padding: 4px 10px; text-transform: uppercase;
}
.product-featured {
  position: absolute; top: 12px; right: 12px; background: #F59E0B; color: #060608;
  font-size: 13px; letter-spacing: 0.12em; padding: 4px 10px; text-transform: uppercase; font-weight: 700;
}
.product-pack {
  position: absolute; bottom: 12px; left: 12px; background: rgba(6,6,8,0.85);
  border: 1px solid rgba(245, 158, 11, 0.5); color: #F59E0B;
  font-size: 13px; letter-spacing: 0.08em; padding: 4px 10px; font-weight: 700;
}
.product-detail {
  font-size: 13px; color: #22C55E; letter-spacing: 0.08em; margin-bottom: 10px; font-weight: 700;
}
.product-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.product-cat { font-size: 14px; letter-spacing: 0.2em; color: #78787F; text-transform: uppercase; margin-bottom: 10px; }
.product-title { font-size: 22px; font-weight: 700; line-height: 1.2; margin-bottom: 10px; }
.product-desc { font-size: 15.5px; color: #A8A8B4; line-height: 1.7; flex: 1; margin-bottom: 20px; }
.product-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(37,37,40,0.6); padding-top: 16px; }
.product-price { font-family: 'Playfair Display', Georgia, serif; font-size: 26px; font-weight: 700; color: #F59E0B; font-variant-numeric: tabular-nums; }
.product-price small { font-size: 15px; color: #78787F; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; letter-spacing: 0.14em; padding: 14px 22px; cursor: pointer;
  text-decoration: none; border: 1px solid transparent; transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.btn-amber { background: #F59E0B; color: #060608; }
.btn-amber:hover { background: #FCD34D; }
.btn-paypal { background: transparent; color: #FAFAFF; border-color: #3b7bbf; }
.btn-paypal:hover { background: rgba(59, 123, 191, 0.15); border-color: #4a90d9; }
.btn-outline { background: transparent; color: #22C55E; border-color: rgba(34,197,94,0.33); }
.btn-outline:hover { background: rgba(34,197,94,0.1); }
.btn-block { width: 100%; }

/* ---------- Modal de compra ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000; background: rgba(6,6,8,0.88);
  backdrop-filter: blur(16px); display: none; align-items: center; justify-content: center; padding: 24px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: #0C0C0F; border: 1px solid #252528; max-width: 460px; width: 100%;
  padding: 32px; position: relative; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 30px 90px rgba(0,0,0,0.9);
}
.modal-close {
  position: absolute; top: 16px; right: 16px; background: transparent; border: 1px solid #252528;
  color: #D4D4DC; width: 34px; height: 34px; cursor: pointer; font-size: 15px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.modal-close:hover { background: #F59E0B; color: #060608; border-color: #F59E0B; }
.modal-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.modal-price { font-size: 14px; color: #F59E0B; margin-bottom: 20px; }
.paypal-container { min-height: 48px; }

/* ---------- Banner éxito ---------- */
.notice {
  max-width: 1200px; margin: 0 auto; padding: 0 40px;
}
.notice-box {
  background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.4);
  color: #22C55E; padding: 18px 22px; font-size: 16px; line-height: 1.6;
}

/* ---------- Admin ---------- */
.admin-wrap { max-width: 1080px; margin: 0 auto; padding: 60px 40px 100px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.admin-title { font-size: clamp(28px, 4vw, 44px); font-weight: 700; }
.login-box { max-width: 380px; margin: 90px auto; background: #0C0C0F; border: 1px solid #252528; padding: 36px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; letter-spacing: 0.2em; color: #78787F; text-transform: uppercase; margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; background: #111114; border: 1px solid #1C1C20; color: #FAFAFF;
  font-family: 'Courier New', monospace; font-size: 16px; padding: 12px 14px;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #F59E0B; outline: none; }

.product-table { width: 100%; border-collapse: collapse; }
.product-table th, .product-table td {
  text-align: left; padding: 12px 10px; border-bottom: 1px solid #1C1C20; font-size: 15px; vertical-align: middle;
}
.product-table th { font-size: 14px; letter-spacing: 0.18em; color: #78787F; text-transform: uppercase; }
.product-table td.actions { white-space: nowrap; }
.icon-btn {
  background: transparent; border: 1px solid #252528; color: #D4D4DC;
  padding: 6px 10px; cursor: pointer; font-size: 15px; margin-right: 6px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.icon-btn:hover { border-color: #F59E0B; color: #F59E0B; }
.icon-btn.danger:hover { border-color: #ef4444; color: #ef4444; }
.pill { display: inline-block; font-size: 14px; letter-spacing: 0.1em; padding: 3px 9px; border: 1px solid #252528; }
.pill.on { color: #22C55E; border-color: rgba(34,197,94,0.4); }
.pill.off { color: #78787F; }

/* Admin tabs & subheads */
.admin-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid #1C1C20; }
.admin-tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: #78787F; font-family: 'Courier New', monospace; font-size: 15px;
  letter-spacing: 0.2em; padding: 12px 18px; cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.admin-tab:hover { color: #F59E0B; }
.admin-tab.active { color: #F59E0B; border-color: #F59E0B; }
.admin-subhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-subhead-title { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 700; color: #FAFAFF; }
.admin-wrap a[href^="http"] { text-decoration: none; }

.hidden { display: none !important; }
.spin {
  width: 16px; height: 16px; border: 2px solid rgba(245,158,11,0.3);
  border-top-color: #F59E0B; border-radius: 50%; animation: rot 0.8s linear infinite;
}
@keyframes rot { to { transform: rotate(360deg); } }

.msg { padding: 12px 16px; font-size: 15px; margin-bottom: 16px; border: 1px solid; }
.msg.ok { color: #22C55E; border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.08); }
.msg.err { color: #ef4444; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.08); }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid #252528; background: #0C0C0F;
  padding: 36px 40px; display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.footer-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.footer-copy { font-size: 14px; color: #78787F; letter-spacing: 0.12em; }
.footer-social { font-size: 14px; color: #78787F; letter-spacing: 0.15em; text-decoration: none; transition: color 0.2s; }
.footer-social:hover { color: #F59E0B; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  nav { padding: 0 24px; }
  .nav-links { display: none; }
  .store-header, .catalog, .notice, .admin-wrap { padding-left: 24px; padding-right: 24px; }
  .store-header { padding-top: 60px; }
  .product-table { display: block; overflow-x: auto; }
  footer { padding: 36px 24px; flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .product-card { transition: none; }
}

/* Legibilidad: negritas en tipografías pequeñas */
.logo-sub, .nav-link, .store-tag, .store-desc, .product-cat, .product-desc,
.product-badge, .product-price small, .btn, .footer-copy, .footer-social,
.pill, .field label, .modal-price, .empty, .msg { font-weight: 700; }

/* ---------- Página de agradecimiento ---------- */
.thanks-box {
  background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.35);
  padding: 44px 32px; margin-bottom: 36px; text-align: center;
}
.thanks-brand {
  font-family: 'Playfair Display', Georgia, serif; font-size: 24px; font-weight: 700;
  letter-spacing: 0.12em; color: #FAFAFF;
}
.thanks-brand span { color: #F59E0B; }
.thanks-check {
  width: 46px; height: 46px; margin: 20px auto; border-radius: 50%;
  background: #22C55E; color: #060608; font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.thanks-title { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.thanks-sub { font-size: 15px; color: #D4D4DC; line-height: 1.6; margin-bottom: 8px; font-weight: 700; }
.thanks-note { font-size: 14px; color: #A8A8B4; margin-bottom: 18px; font-weight: 700; }
.thanks-contact { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.thanks-contact a {
  font-family: 'Courier New', monospace; font-size: 14px; color: #F59E0B;
  text-decoration: none; border: 1px solid rgba(180,83,9,0.33); padding: 11px 18px;
  font-weight: 700; transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.thanks-contact a:hover { background: #F59E0B; color: #060608; border-color: #F59E0B; }

/* ---------- Carrito ---------- */
.cart-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: transparent; border: 1px solid #252528;
  color: #FAFAFF; cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.cart-btn:hover { border-color: #F59E0B; color: #F59E0B; }
.cart-count {
  position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 10px; background: #F59E0B; color: #060608;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.cart-backdrop {
  position: fixed; inset: 0; z-index: 990; background: rgba(6,6,8,0.7); backdrop-filter: blur(4px);
}
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000; width: 380px; max-width: 90vw;
  background: #0C0C0F; border-left: 1px solid #252528; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
  overscroll-behavior: contain;
}
.cart-drawer.open { transform: translateX(0); }
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid #252528;
}
.cart-head h3 { font-size: 20px; }
.cart-close {
  background: transparent; border: 1px solid #252528; color: #D4D4DC;
  width: 34px; height: 34px; cursor: pointer; font-size: 15px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.cart-close:hover { background: #F59E0B; color: #060608; border-color: #F59E0B; }
.cart-items { flex: 1; overflow-y: auto; padding: 16px 24px; }
.cart-empty { color: #78787F; font-size: 14px; text-align: center; padding: 40px 0; font-weight: 700; }
.cart-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid #1C1C20;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title { font-size: 14px; color: #F0F0F8; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.cart-item-price { font-size: 13px; color: #F59E0B; font-weight: 700; }
.cart-item-qty { display: flex; align-items: center; gap: 8px; }
.cart-item-qty button {
  width: 26px; height: 26px; background: #111114; border: 1px solid #252528; color: #FAFAFF;
  cursor: pointer; font-size: 15px; line-height: 1;
}
.cart-item-qty button:hover { border-color: #F59E0B; color: #F59E0B; }
.cart-item-qty span { min-width: 20px; text-align: center; font-size: 14px; font-weight: 700; }
.cart-item-remove { background: transparent; border: none; color: #78787F; cursor: pointer; font-size: 14px; }
.cart-item-remove:hover { color: #ef4444; }
.cart-foot { padding: 20px 24px; border-top: 1px solid #252528; display: grid; gap: 10px; }
.cart-total-row { font-size: 15px; color: #D4D4DC; margin-bottom: 6px; font-weight: 700; }
.cart-total {
  font-family: 'Playfair Display', Georgia, serif; font-size: 24px; font-weight: 700; color: #F59E0B;
}
.cart-total-row small { color: #78787F; font-size: 12px; }
.pay-methods {
  font-family: 'Courier New', monospace; font-size: 12px; line-height: 1.6;
  color: #78787F; text-align: center; letter-spacing: 0.04em;
  padding: 2px 0 4px; border-top: 1px dashed #1C1C20; border-bottom: 1px dashed #1C1C20;
}
.pay-methods strong { color: #F59E0B; font-weight: 700; }