:root {
  --bg: #f6f3ec;
  --panel: #151518;
  --panel-raised: #1d1d21;
  --gold: #c9a44c;
  --gold-light: #e6c66f;
  --text: #f6f3ec;
  --muted: #aaa7a0;
  --line: #303035;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
button { font: inherit; }
.topline {
  padding: 9px 15px; text-align: center; background: #302716; color: #f3d98f;
  font-size: 11px; letter-spacing: .12em; font-weight: 700;
}
.topline span { padding: 0 7px; color: var(--gold); }
.site-header {
  min-height: 82px; padding: 0 max(4%, calc((100% - 1170px)/2)); display: flex;
  align-items: center; justify-content: space-between; gap: 25px;
  border-bottom: 1px solid var(--line); background: #0c0c0eee; position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; min-width: 230px; }
.brand-mark {
  width: 43px; height: 43px; display: grid; place-items: center; position: relative;
  color: var(--gold-light); font-size: 26px; text-shadow: 0 0 15px #c9a44c55;
}
.brand-mark:before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--gold); transform: rotate(45deg); }
.brand-copy { display: flex; flex-direction: column; gap: 5px; }
.brand-copy strong { font: 700 20px Georgia, serif; letter-spacing: .06em; color: #f2e6c9; }
.brand-copy small { color: var(--gold); font-size: 8px; letter-spacing: .24em; }
.main-nav { display: flex; gap: 8px; }
.nav-tab {
  border: 0; background: transparent; color: #c8c4bb; padding: 10px 12px; cursor: pointer;
  font-size: 13px; border-bottom: 2px solid transparent;
}
.nav-tab:hover, .nav-tab.active { color: var(--gold-light); border-bottom-color: var(--gold); }
.cart-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 3px; padding: 0 5px; border-radius: 99px; background: #302817; color: var(--gold-light); font-size: 10px; }
.header-note { color: var(--gold-light); font-size: 10px; letter-spacing: .08em; white-space: nowrap; text-decoration: none; }
.header-note:hover { color: #fff0bd; text-decoration: underline; text-underline-offset: 4px; }
.container { width: min(1120px, 92%); margin: 0 auto; }
.view { display: none; padding: 48px 0 65px; }
.view.active { display: block; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.eyebrow { margin: 0; color: var(--gold-light); font-size: 11px; letter-spacing: .2em; font-weight: 800; }
h1 { margin: 10px 0 8px; font-size: clamp(32px, 4vw, 45px); line-height: 1.04; letter-spacing: -.04em; }
h2 { margin: 14px 0 12px; font-size: clamp(25px, 3vw, 34px); line-height: 1.12; letter-spacing: -.025em; }
.subheading { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.stock-note { color: var(--muted); font-size: 12px; padding-bottom: 5px; white-space: nowrap; }
.product-card {
  display: grid; grid-template-columns: 1.03fr .97fr; gap: 26px; padding: 18px;
  background: var(--panel); border: 1px solid #594827; border-radius: 15px; box-shadow: 0 18px 55px #0007;
}
.product-image-wrap { min-height: 490px; position: relative; overflow: hidden; border-radius: 10px; background: #201d18; }
.product-image { width: 100%; height: 100%; min-height: 490px; max-height: 650px; object-fit: cover; display: block; }
.image-label {
  position: absolute; top: 14px; left: 14px; padding: 8px 11px; border: 1px solid #c9a44c88;
  border-radius: 4px; background: #0c0c0edb; color: #f0d37f; font-size: 10px; font-weight: 800; letter-spacing: .12em;
}
.product-info { padding: 12px 10px 10px 0; }
.gold-kicker { color: var(--gold-light); font-size: 12px; font-weight: 750; }
.description { color: #c4c0b7; font-size: 14px; line-height: 1.75; }
.description strong { color: var(--gold-light); }
.prize-line { display: flex; flex-wrap: wrap; gap: 7px 15px; margin-top: 18px; font-size: 12px; color: var(--muted); }
.prize-line strong { color: #e9dfc8; }
.progress-label { display: flex; justify-content: space-between; margin: 21px 0 7px; color: var(--muted); font-size: 11px; }
.progress-label strong { color: var(--gold-light); }
.progress-track { height: 7px; border-radius: 20px; background: #29292e; overflow: hidden; }
.progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #f0d27c, #c8952e); }
.golden-ticket-card { margin-top: 13px; padding: 13px; border: 1px solid #6d5524; border-radius: 9px; background: linear-gradient(135deg, #282111, #17150f); }
.golden-ticket-heading, .golden-ticket-progress { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.golden-ticket-heading strong { color: var(--gold-light); font-size: 14px; }
.golden-ticket-heading span { color: #f3d98f; font-size: 11px; font-weight: 750; text-align: right; }
.golden-ticket-card p { margin: 9px 0; color: #c4c0b7; font-size: 11px; line-height: 1.55; }
.golden-ticket-progress { padding: 9px 0 5px; border-top: 1px solid #4b3c1f; font-size: 11px; }
.golden-ticket-progress span, .golden-ticket-card small { color: var(--muted); }
.golden-ticket-progress strong { color: var(--gold-light); }
.golden-ticket-card small { display: block; font-size: 10px; line-height: 1.5; }
.golden-ticket-terms-link { padding: 0; border: 0; background: transparent; color: var(--gold-light); cursor: pointer; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
#ticket-dorado { scroll-margin-top: 110px; }
.golden-tickets-panel { margin: 22px 0 0; padding: 24px; border: 1px solid #594827; border-radius: 14px; background: var(--panel); }
.golden-tickets-intro { margin-bottom: 18px; }
.golden-tickets-intro h2 { margin: 8px 0; font-size: 26px; }
.golden-tickets-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.golden-ticket { display: flex; min-width: 0; aspect-ratio: 2.13 / 1; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 13px 18px; background: url("assets/ticket-dorado.png") center / 100% 100% no-repeat; filter: drop-shadow(0 8px 9px #0008); text-align: center; }
.golden-ticket:before, .golden-ticket:after { display: none; }
.golden-ticket-label { color: #553500; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.golden-ticket-number { color: #291900; font-size: clamp(18px, 2vw, 25px); font-weight: 900; letter-spacing: .09em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #ffe8a0aa; }
.golden-ticket-status { max-width: 100%; padding-top: 5px; border-top: 1px solid #69460977; color: #4c350d; font-size: 10px; font-weight: 700; }
.golden-ticket.is-enabled { filter: drop-shadow(0 0 13px #f5cf5c77); }
.golden-ticket.is-enabled .golden-ticket-status { color: #17491d; font-weight: 900; }
.golden-ticket.is-claimed { filter: drop-shadow(0 0 12px #c7353577); }
.golden-ticket.is-claimed:before { position: absolute; inset: 5%; display: block; border-radius: 5px; background: #bd17173b; content: ""; z-index: 1; }
.golden-ticket.is-claimed:after { position: absolute; inset: 40% 10% auto; display: grid; place-items: center; padding: 5px 3px; border: 2px solid #ffb0a8; background: #8d1111eb; color: #fff2ee; content: "RECLAMADO"; font-size: clamp(9px, 1.2vw, 13px); font-weight: 950; letter-spacing: .12em; text-shadow: 0 1px 2px #420000; transform: rotate(-8deg); z-index: 3; }
.golden-ticket.is-claimed > * { position: relative; z-index: 2; }
.golden-ticket.is-claimed .golden-ticket-status { color: #710e0e; font-weight: 900; }
.separator { height: 1px; background: var(--line); margin: 21px 0; }
.field-title { margin: 0 0 11px; font-size: 15px; font-weight: 800; }
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.package-option {
  border: 1px solid #3a3938; border-radius: 8px; background: #1c1c20; color: var(--text);
  padding: 12px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.package-option:hover { border-color: var(--gold); }
.package-option.selected { border-color: var(--gold-light); background: #302817; box-shadow: inset 0 0 0 1px #c9a44c55; }
.package-option strong { color: var(--gold-light); font-size: 21px; }
.package-option span { color: var(--muted); font-size: 11px; }
.package-option b { font-size: 12px; margin-top: 4px; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 12px; }
.price-row > div { display: flex; flex-direction: column; gap: 5px; }
.price-row small { color: var(--muted); font-size: 11px; }
.price-row strong { font-size: 13px; }
.price-row .total { text-align: right; }
.price-row .total strong { color: var(--gold-light); font-size: 27px; letter-spacing: -.03em; }
.primary-button, .secondary-button {
  width: 100%; border: 0; border-radius: 999px; padding: 15px 20px; cursor: pointer;
  font-size: 13px; font-weight: 900; letter-spacing: .04em;
}
.primary-button { color: #17130a; background: linear-gradient(110deg, #f4d77d, #d7a42f); }
.primary-button:hover { filter: brightness(1.08); }
.secondary-button { color: var(--gold-light); background: transparent; border: 1px solid var(--gold); margin-top: 12px; }
.microcopy { color: var(--muted); font-size: 11px; line-height: 1.65; margin: 13px 0 0; }
.legal-note {
  margin: 19px 0 0; padding: 13px 15px; border: 1px solid #39352c; border-radius: 8px;
  color: #aaa7a0; font-size: 11px; line-height: 1.65;
}
.narrow-panel {
  width: min(590px, 100%); margin: 0 auto; padding: 30px;
  border: 1px solid #594827; border-radius: 15px; background: var(--panel);
}
.summary-card { margin: 25px 0 18px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #101014; }
.summary-card.compact { margin: 18px 0; }
.summary-line { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-bottom: 1px solid #29292e; font-size: 13px; }
.summary-line:last-child { border-bottom: 0; }
.summary-line span { color: var(--muted); }
.summary-line strong { text-align: right; }
.summary-line.grand-total strong { color: var(--gold-light); font-size: 18px; }
.cart-items { display: grid; gap: 9px; margin-top: 20px; }
.cart-item { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #101014; }
.cart-item-info, .cart-controls { display: flex; flex-direction: column; gap: 6px; }
.cart-item-info strong { font-size: 13px; }
.cart-item-info span, .cart-controls span { color: var(--muted); font-size: 11px; }
.cart-controls { align-items: flex-end; }
.remove-button { padding: 3px 0; border: 0; background: transparent; color: #e0b867; cursor: pointer; font-size: 11px; text-decoration: underline; }
.cart-empty { padding: 18px; border: 1px dashed #49433a; border-radius: 9px; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; }
.primary-button:disabled { cursor: not-allowed; opacity: .45; }
.check-line { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; color: #c5c0b5; font-size: 12px; line-height: 1.5; }
.check-line input { accent-color: var(--gold); margin-top: 2px; }
.check-line a { color: var(--gold-light); text-underline-offset: 3px; }
.terms-panel { width: min(900px, 92%); margin: 0 auto; padding: 30px; border: 1px solid #594827; border-radius: 15px; background: var(--panel); }
.terms-panel h2 { margin: 10px 0 12px; color: #f2e6c9; }
.terms-panel h3 { margin: 28px 0 9px; color: var(--gold-light); font-size: 17px; }
.terms-panel p { color: #c2beb5; font-size: 13px; line-height: 1.75; }
.terms-panel .terms-intro { max-width: 720px; color: var(--muted); }
.terms-panel strong { color: #eee5d2; }
.terms-panel a { color: var(--gold-light); text-underline-offset: 3px; }
.terms-contact { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); }
.footer-terms-link { color: var(--gold-light); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.text-button { display: block; margin: 15px auto 0; padding: 8px 12px; border: 0; background: transparent; color: var(--gold-light); cursor: pointer; font-size: 12px; }
.payment-brand { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 15px; border: 1px solid var(--line); border-radius: 9px; }
.payment-symbol { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #f4d77d; color: #16120a; font-size: 22px; font-weight: 900; }
.payment-brand div { display: flex; flex-direction: column; gap: 3px; }
.payment-brand small { color: var(--muted); font-size: 11px; }
.secure-label { margin-left: auto; color: var(--gold-light); font-size: 9px; letter-spacing: .1em; }
.payment-placeholder { margin: 18px 0; padding: 24px 18px; text-align: center; border: 1px dashed #61502c; border-radius: 10px; background: #17150f; }
.lock-icon { display: block; color: var(--gold-light); font-size: 26px; margin-bottom: 8px; }
.payment-placeholder p { color: var(--muted); font-size: 12px; line-height: 1.6; margin-bottom: 0; }
.status-icon { width: 55px; height: 55px; margin: 24px auto 14px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-light); font-size: 28px; }
#view-estado h1, #view-estado > .narrow-panel > .subheading { text-align: center; }
.assigned-box { margin: 20px 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #101014; }
.assigned-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.assigned-head span { color: var(--gold-light); font-size: 9px; letter-spacing: .12em; }
.number-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.number-chip { padding: 7px 9px; border: 1px solid #544629; border-radius: 5px; color: var(--gold-light); background: #211b10; font-size: 11px; font-variant-numeric: tabular-nums; }
.footer-inner { display: flex; justify-content: space-between; gap: 15px; padding: 20px 0; border-top: 1px solid var(--line); color: #77746d; font-size: 11px; }
.toast { display: none; position: fixed; z-index: 20; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(520px, 92%); padding: 14px 17px; border: 1px solid var(--gold); border-radius: 9px; background: #202024; color: var(--text); font-size: 12px; line-height: 1.5; box-shadow: 0 10px 35px #0009; }
.toast.show { display: block; }
@media (max-width: 820px) {
  .site-header { padding: 12px 4%; flex-wrap: wrap; }
  .brand { min-width: 0; }
  .main-nav { order: 3; width: 100%; overflow-x: auto; justify-content: center; }
  .header-note { font-size: 9px; }
  .product-card { grid-template-columns: 1fr; gap: 15px; }
  .product-image-wrap, .product-image { min-height: 0; }
  .product-image { height: auto; aspect-ratio: 4 / 5; max-height: 520px; }
  .product-info { padding: 5px 4px 8px; }
  .section-heading { display: block; }
  .stock-note { display: inline-block; margin-top: 12px; }
  .golden-tickets-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .view { padding: 30px 0 45px; }
  .narrow-panel { padding: 20px 16px; }
  .terms-panel { width: 92%; padding: 21px 17px; }
  .nav-tab { padding: 9px 10px; font-size: 12px; }
  .header-note { display: none; }
  .footer-inner { flex-direction: column; }
  .cart-item { align-items: flex-start; }
  .golden-tickets-panel { padding: 18px 14px; }
  .golden-tickets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .golden-ticket { padding: 9px 12px; gap: 3px; }
  .golden-ticket-label { font-size: 8px; }
  .golden-ticket-number { font-size: 18px; }
  .golden-ticket-status { padding-top: 3px; font-size: 9px; }
}