/*
  Theme Name: CECyTE Sorteo
  Theme URI: https://cecyte.coahuila.edu.mx
  Description: Tema oficial del Sorteo Anual por la Educacion Tecnologica CECyTEC-EMSaD 2027
  Version: 2.0.0
  Author: CECyTE Coahuila
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Colors */
  --c-cream:       #F5EDD4;
  --c-cream-light: #FAF5E9;
  --c-orange:      #FF4800;
  --c-orange-dark: #E64000;
  --c-green:       #1E8C38;
  --c-green-dark:  #166B2A;
  --c-dark:        #111111;
  --c-dark-green:  #0C1F10;
  --c-lime:        #BDE55A;
  --c-white:       #FFFFFF;
  --c-gray:        #888888;
  --c-gray-light:  #E2D9C2;
  --c-card-dark:   #1A1A1A;
  --c-card-mid:    #2A2A2A;

  /* Typography */
  --font: 'Figtree', sans-serif;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Border radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,.14);
  --shadow-lg:  0 8px 40px rgba(0,0,0,.22);

  /* Container */
  --container-max: 1240px;
  --container-pad: 5%;

  /* Backward-compat aliases used by inner-page templates */
  --primary:    var(--c-cream);
  --primarydark:var(--c-dark);
  --secondary:  var(--c-orange);
  --terciary:   var(--c-dark-green);
  --quarty:     var(--c-lime);
  --lightgray:  var(--c-gray-light);
  --darkgray:   var(--c-gray-light);
  --colortext:  var(--c-dark);
  --radius:     var(--r-md);
  --boxradius:  var(--r-md);
  --boxshadow:  var(--shadow-md);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden; -webkit-text-size-adjust: none; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-dark);
  background-color: var(--c-white);
  background-image: radial-gradient(#e4e4e4 1px, #0000 1px);
  background-size: 10px 10px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--sp-4);
}

a { color: inherit; text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .75; }

img { display: block; max-width: 100%; height: auto; }

button { font-family: var(--font); cursor: pointer; border: none; background: transparent; }

ul, ol { list-style: none; }

strong, b { font-weight: 700; }

em { font-style: italic; }

.hidden { display: none !important; }

/* ==========================================================================
   3. LAYOUT UTILITIES
   ========================================================================== */
main {width: 100%;position: relative;}

/* Legacy inner — used by inner-page templates */
.inner {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 96%;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Generic centering container (new templates) */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-pad);
  width: 100%;
  box-sizing: border-box;
}
.inner.hidden { overflow: hidden; }

.col_1 { width: 100%; }
.col_2 { width: 48%; }
.col_3 { width: 32%; }
.col_4 { width: 23%; }
.col_5 { width: 18%; }
.col_aside { width: calc(100% - 320px - 2em); display: block; }
aside { display: block; width: 300px; margin: 0; }
.wrapper { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; }
.divider { width: 100%; }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-full);
  font-family: var(--font);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: opacity .2s, transform .15s;
  background: var(--c-orange);
  color: var(--c-white);
  text-decoration: none;
}
.btn:hover { opacity: .85; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.block { display: flex; width: 100%; }
.btn.bold { font-size: 1.1rem; font-weight: 800; }
.btn.small { height: 38px; font-size: .85rem; }
.btn.right { display: block; width: auto; margin-left: auto; }
.btn.center { display: block; margin: var(--sp-4) auto 0; }
.btn.margin { margin-bottom: var(--sp-16); }
.btn.disabled { opacity: .5; pointer-events: none; }
.btn:disabled { opacity: .6; pointer-events: none; }
.btn.secondary { background: var(--c-orange); color: var(--c-white); }
.btn.terciary { background: transparent; color: var(--c-white); border-color: var(--c-white); }
.btn.quarty { background: var(--c-lime); color: var(--c-dark); border-color: var(--c-lime); }
.btn.cancel { background: var(--c-gray-light); color: var(--c-dark); }
.btn.clean { background: transparent; color: var(--c-dark); box-shadow: none; }

input[type="submit"],
.forms .frm_submit button {
  height: 48px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-full);
  font-family: var(--font);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  background: var(--c-orange);
  color: var(--c-white);
  width: 100%;
  display: block;
}

.flex_btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.flex_btns.right { justify-content: flex-end; }
.flex_btns.right .btn { min-width: 150px; }

/* ==========================================================================
   5. FORMS
   ========================================================================== */
.forms { width: 100%; }
.forms .wrapper { padding: 0; }
.forms label {
  display: block;
  position: relative;
  background: var(--c-white);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.forms label.span { flex-wrap: wrap; border-radius: var(--r-sm); }
.forms label.span span { display: block; width: 100%; padding: var(--sp-2) var(--sp-5) 0; opacity: .7; font-size: .8rem; }
.forms label.captcha { box-shadow: none; background: transparent; }
.forms label.required::before { content: '*'; color: var(--c-orange); font-weight: 900; line-height: 40px; position: absolute; left: 10px; }
.forms .separator { width: 20%; margin: var(--sp-8) 0; height: 2px; background: var(--c-gray); }

.forms input[type="number"], .forms input[type="text"], .forms input[type="password"], .forms input[type="tel"], .forms input[type="email"], .forms textarea, .forms select {
  display: block;
  width: 100%;
  border: none;
  height: 52px;
  font-family: var(--font);
  font-size: 1rem;
  outline: none;
  -webkit-appearance: none;
  padding: 10px var(--sp-5) 0;
  background: transparent;
  color: var(--c-dark);
  position: relative;
  z-index: 1;
}
.forms input[type="text"][readonly],
.forms input[type="tel"][readonly],
.forms input[type="email"][readonly] { background: #f5f5f5; cursor: no-drop; }
.forms textarea { height: 100px; padding: var(--sp-4); resize: none; border-radius: var(--r-sm); }

.forms label span.placeholder {
  position: absolute; top: 0; padding: 0 var(--sp-4); opacity: 1;
  width: 100%; height: 100%; display: flex; align-items: center; pointer-events: none;
}
.forms label input:hover + span.placeholder,
.forms label input:focus + span.placeholder { font-size: .65rem; margin-top: -10px; }

.forms label.select::after {
  content: ''; background: url(./img/caret.svg) no-repeat center;
  position: absolute; right: 10px; height: 40px; bottom: 0; width: 15px; pointer-events: none;
}

.forms label.checkbox {
  background: transparent; padding: 10px 0 10px 40px; box-shadow: none;
  cursor: pointer; color: #666; min-height: 40px; display: block; font-size: .9rem;
}
.forms label.checkbox a { color: var(--c-orange); text-decoration: underline; }
.forms label.checkbox i {
  display: block; position: absolute; left: 7px;
  width: 26px; height: 26px; line-height: 24px; text-align: center;
  font-family: "Font Awesome 5 Free"; color: var(--c-dark);
  border: 1.5px solid var(--c-dark); border-radius: var(--r-sm);
  font-weight: 900; top: 7px; background: var(--c-white);
}
.forms label.checkbox input:checked + i::after { content: "\f00c"; }
.forms label.checkbox input { position: absolute; left: -100%; width: inherit; height: inherit; }
.forms label.checkbox.invoice i {left: 7px;}

.forms label.radio {
  background: transparent; padding: 8px 0 5px 37px; box-shadow: none;
  cursor: pointer; color: var(--c-white); min-height: 36px; display: block; font-size: 1.05rem;
}
.forms label.radio i {
  display: block; position: absolute; left: 2px;
  width: 25px; height: 25px; border: 2px solid var(--c-gray-light);
  border-radius: 50%; top: calc(50% - 12px); padding: 2px; background: var(--c-gray-light);
}
.forms label.radio input:checked + i { border-color: var(--c-orange); }
.forms label.radio input:checked + i::after { width: 100%; height: 100%; content: ''; background: var(--c-orange); display: block; border-radius: 50%; }
.forms label.radio input { position: absolute; left: -20px; }
.forms input:disabled { opacity: .4; cursor: default; }
.forms .frm_submit { width: 100%; margin: var(--sp-8) 0; }
.forms .frm-g-recaptcha { display: flex; justify-content: center; }

/* ── Guest modal: dark-bg form overrides ──────────────────────── */
.lightbox[data-modal="guest"] .forms label {
  background: rgba(255,255,255,.08);
  color: var(--c-white);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: var(--r-md);
}
.invalid-feedback {
  padding: 0 .4rem .4rem;
  font-size: .7rem
}
.lightbox[data-modal="guest"] .forms label input,.lightbox[data-modal="guest"] .forms label select {
  background: transparent;
  color: var(--c-white);
  padding-left: var(--sp-8); /* room for the * asterisk */
}
.lightbox[data-modal="guest"] .forms label input:-webkit-autofill,
.lightbox[data-modal="guest"] .forms label select:-webkit-autofill{
  -webkit-text-fill-color: #ddd;
  -webkit-box-shadow: 0 0 0px 1000px #494949 inset;
  background: #f00 
}
/* Asterisk in lime */
.lightbox[data-modal="guest"] .forms label.required::before {
  color: var(--c-lime);
  z-index: 2;
}
/* Placeholder span: shift right to clear the asterisk */
.lightbox[data-modal="guest"] .forms label span.placeholder {
  color: rgba(255,255,255,.5);
  padding-left: var(--sp-8);
  font-size: 1rem;
  transition: font-size .15s, margin-top .15s, color .15s;
}
.lightbox[data-modal="guest"] .forms label input:focus + span.placeholder,
.lightbox[data-modal="guest"] .forms label input:hover + span.placeholder {
  color: var(--c-lime);
  font-size: .65rem;
  margin-top: -10px;
}
/* Keep span up when input has a value (placeholder=" " trick activates this) */
.lightbox[data-modal="guest"] .forms label input:not(:placeholder-shown) + span.placeholder {
  color: var(--c-lime);
  font-size: .65rem;
  margin-top: -15px;
  z-index: 1;
}
.lightbox[data-modal="guest"] .forms label.checkbox {
  color: rgba(255,255,255,.75);
  background: transparent;
  border: none;
}
.lightbox[data-modal="guest"] .forms label.checkbox i {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color: var(--c-lime);
}
.lightbox[data-modal="guest"] .forms label.checkbox input:checked + i {
  background: var(--c-lime);
  border-color: var(--c-lime);
  color: var(--c-dark);
}
.lightbox[data-modal="guest"] .forms label.checkbox a {
  color: var(--c-lime);
  text-decoration: underline;
}
/* "CONTINUAR" button uses lime, dark text */
.lightbox[data-modal="guest"] .forms .btn {
  background: var(--c-lime);
  color: var(--c-dark);
  border-color: var(--c-lime);
  font-weight: 800;
}
.lightbox[data-modal="guest"] .forms .btn:hover { opacity: .9; }
.lightbox[data-modal="guest"] .fieldtag{
  padding: 6px 0 0 var(--sp-6);
  opacity:0.6;
  display: block;
}
.lightbox[data-modal="guest"] .regularpad{
  padding: 0 10px!important;
  height: 42px;
}


/* ── end guest modal overrides ─────────────────────────────────── */

form#loginform label {
  color: var(--c-white); background: transparent;
  font-family: var(--font); margin: 0; padding: 2%;
  position: relative; overflow: hidden; box-shadow: none;
}
form#loginform label.checkbox { padding: 13px 10px 14px 45px; font-size: .9em; background: rgba(0,0,0,.1); border-radius: var(--r-sm); }
form#loginform input[type="text"],
form#loginform input[type="password"],
form#loginform input[type="email"],
form#loginform input[type="number"] {
  background: var(--c-white); margin-bottom: 10px;
  color: var(--c-dark); box-shadow: var(--shadow-sm); border-radius: var(--r-full);
}
form#loginform .login-remember { margin-bottom: 20px; }
form#loginform input[type="submit"] { background: var(--c-orange); }

/* filter input */
.filter {
  border: 1.5px solid #888; width: 100%; border-radius: var(--r-full);
  display: flex; overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: var(--sp-12);
}
.filter input {
  border: none; background: transparent; width: 100%; outline: none;
  font-family: var(--font); font-size: 1.05rem; padding: 0 var(--sp-8);
}
.filter .btn { border-radius: 0; }

/* ==========================================================================
   6. OVERLAY / LIGHTBOX
   ========================================================================== */
.overlay {
  position: fixed; width: 100%; height: 100%; z-index: 3;
  left: 0; top: 0; background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: .4s;
}
.overlay.active { pointer-events: all; opacity: 1; }

.lightbox {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.75);
  opacity: 0;
  pointer-events: none;
  transition: .3s;
  backdrop-filter: blur(2px);
}
.lightbox.open,
.lightbox.active { opacity: 1; pointer-events: all; }
.lightbox.block { align-items: flex-start; overflow-y: auto; }
.close_layer { position: absolute; width: 100%; height: 100%; }

/* ── Game / Lucky-ticket modal ─────────────────────────────────── */
.modal-game { text-align: center; }
.modal-game__title {
  color: var(--c-white);
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: var(--sp-6);
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
}
.modal-game__title i {
  font-size: 5rem;
  margin: 0 -.5rem 0 2rem!important;
}
.modal-game__fingers { font-style: normal; font-size: 1.15em; vertical-align: middle; }
.modal-game__img { width: 72px; opacity: .6; margin: 0 auto var(--sp-4); display: block; }
.modal-game__reels {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6);
  display: flex; justify-content: center; margin-bottom: var(--sp-6);
  /* Safari: contain animation within this box, prevent modal resize */
  overflow: hidden;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.modal-game__reels .ezslots {
  display: inline-flex;
  gap: var(--sp-2);
  /* allow horizontal scroll for 6-digit boletos on small screens */
  /* overflow-x: auto; */
  -webkit-overflow-scrolling: touch;
}
.modal-game__reels .ezslots > .window {
  overflow: hidden;
  display: inline-block;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
  /* Safari: force GPU layer so margin-top animation doesn't bleed outside */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* dimensions controlled by EZSlots JS options — no !important override */
  padding-bottom: 74px;
}
.modal-game__reels .ezslots .content {
  font-size: 2rem; font-weight: 900; color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
}
.modal-game__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.modal-game__actions .btn { flex: 1; min-width: 140px; }
/* ── end game modal ────────────────────────────────────────────── */

/* ── Guest / buyer-data modal ──────────────────────────────────── */
.guest-modal fieldset {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
  border: none;
  padding: 0;
  justify-content: space-between;
}
.guest-modal .col_1 { width: 100%; }
.guest-modal .col_2 {width: 48%;}


.guest-modal .content_lightbox {
  max-width: 640px;
  width: 90%;
  scrollbar-width: thin;
  scrollbar-color: var(--c-card-mid) black;
}
.guest-modal .content_lightbox::-webkit-scrollbar {
  width: 8px;
}
.guest-modal .content_lightbox::-webkit-scrollbar-track {
  background: #111;
}
.guest-modal .content_lightbox::-webkit-scrollbar-thumb {
  background-color: var(--c-cream-light);
  border-radius: var(--r-full);
  border: 2px solid var(--c-cream-light);
}
.guest-modal .content_lightbox::-webkit-scrollbar-thumb:hover {
  background-color: var(--c-cream-light);
}
.guest-modal__title {
  color: var(--c-white); font-size: 1.1rem; font-weight: 700;
  margin-bottom: var(--sp-2); text-align: center;
}
.guest-modal__sub {
  display: block; color: var(--c-gray); font-size: .85rem;
  margin-bottom: var(--sp-5); text-align: center;
}
.guest-modal__invoice-section {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: var(--sp-4);
  margin-top: var(--sp-2);
  width: 100%;
}
.guest-modal__invoice-label {
  display: block; color: var(--c-gray); font-size: .8rem;
  margin-bottom: var(--sp-3); font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em;
}
/* ── end guest modal ───────────────────────────────────────────── */

.content_lightbox {
  background: var(--c-card-dark);
  border-radius: var(--r-xl);
  padding: var(--sp-10);
  max-width: 480px;
  width: 92%;
  position: relative;
  z-index: 1;
  color: var(--c-white);
  /* Safari: own compositing layer prevents animated children from resizing the modal */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 20px 12px rgba(0,0,0,.4);
  max-height: 90vh;
  overflow: auto;
}
.content_lightbox button.close {
  position: absolute; right: var(--sp-4); top: var(--sp-4);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: var(--c-white);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}

.login_module img { width: 80px; margin: 0 auto var(--sp-6); }
.login_module h4 { color: var(--c-white); margin-bottom: var(--sp-6); text-align: center; font-size: 1.1rem; }
.login_options .exp { display: block; color: var(--c-gray); font-size: .9rem; margin-bottom: var(--sp-4); }
.login_options .social_login { margin-bottom: var(--sp-4); }
.social_btns { display: flex; gap: var(--sp-3); }
.social_btns button { flex: 1; height: 44px; border-radius: var(--r-full); font-weight: 700; font-size: .9rem; }
.social_btns .fb { background: #1877f2; color: var(--c-white); }
.social_btns .google { background: var(--c-white); color: var(--c-dark); }

.secure_label { text-align: center; font-size: .8rem; color: var(--c-gray); padding-top: var(--sp-4); }

/* ==========================================================================
   7. LOADER
   ========================================================================== */
.loader {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,.45); z-index: 99;
  display: flex; align-items: center; justify-content: center;
}
.lds-ripple { display: inline-block; position: relative; width: 80px; height: 80px; }
.lds-ripple div {
  position: absolute; border: 4px solid var(--c-white);
  opacity: 1; border-radius: 50%;
  animation: ripple 1s cubic-bezier(0,.2,.8,1) infinite;
}
.lds-ripple div:nth-child(2) { animation-delay: -.5s; }
@keyframes ripple {
  0%   { top:36px; left:36px; width:0; height:0; opacity:1; }
  100% { top:0;    left:0;    width:72px; height:72px; opacity:0; }
}

/* ==========================================================================
   8. NAVBAR
   ========================================================================== */

/* Old mobile nav overlay — hidden by default */
nav.mobile-nav { display: none; }
menu.main_menu { display: none; }

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: white;
  /* backdrop-filter: blur(14px); */
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 3px solid var(--c-green);
}

.navbar__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-pad);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  flex-shrink: 0;
}
.navbar__brand img {
  width: 180px;
  object-fit: contain;
  border-radius: 50%;
}
.navbar__brand-name {
  display: block;
  font-weight: 800;
  font-size: .95rem;
  color: var(--c-dark);
  line-height: 1.2;
}
.navbar__brand-sub {
  display: block;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-gray);
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex: 1;
  justify-content: center;
}
.navbar__nav a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-dark);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}
.navbar__nav a::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 2px;
  background: var(--c-green);
  transition: width .25s;
}
.navbar__nav a:hover { opacity: 1; }
.navbar__nav a:hover::after { width: 100%; }

/* WP nav menu outputs a <ul> — make it inherit the flex layout */
.navbar__nav > ul { display: flex; align-items: center; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; width: 100%; justify-content: center; }
.navbar__nav li { list-style: none; }

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.navbar__cta {
  background: var(--c-green);
  color: var(--c-white);
  font-weight: 700;
  font-size: .88rem;
  padding: 0 var(--sp-5);
  height: 40px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: opacity .2s, transform .15s;
  text-decoration: none;
}
.navbar__cta:hover { opacity: .85; transform: translateY(-1px); }

.navbar__cta--buy {
  background: var(--c-green);
  color: var(--c-white);
  border: 2px solid var(--c-green);
  /* border-radius: 0; */
}
.navbar__cta--buy:hover { background: var(--c-green); color: var(--c-white); opacity: 1; }

/* Cart icon button */
.navbar__cart {
  position: relative;
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: rgba(0,0,0,.06);
  color: var(--c-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
  border: none;
}

.rotulacion .navbar__cart.cart {
  pointer-events: none;
  opacity: .6;
}

.navbar__cart:hover { background: rgba(0,0,0,.1); }
.navbar__cart em {
  position: absolute; top: -4px; right: -4px;
  background: var(--c-green); color: var(--c-white);
  font-size: .62rem; font-weight: 700; font-style: normal;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; pointer-events: none;
}

/* Logged-in user display */
.navbar__user {
  position: relative;
  background: var(--c-green);
  color: var(--c-white);
  border-radius: var(--r-md);
  font-size: .85rem;
}
.navbar__user-name {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-4); height: 40px; cursor: pointer;
}
.navbar__user-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--c-dark);
  border-radius: var(--r-md);
  min-width: 200px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 10;
}
.navbar__user:hover .navbar__user-dropdown { display: block; }
.navbar__user-dropdown a {
  display: block; padding: var(--sp-3) var(--sp-5);
  color: var(--c-white); font-size: .9rem; transition: background .15s;
}
.navbar__user-dropdown a:hover { background: rgba(255,255,255,.08); opacity: 1; }

/* Mobile toggle */
.navbar__toggle {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; background: transparent; border: none; cursor: pointer;
}
.navbar__toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--c-dark); border-radius: 2px; transition: .3s;
}

/* Mobile drawer */
.navbar__drawer {
  display: none;
  position: fixed;
  top: 68px;
  left: 0;
  width: 100%;
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-gray-light);
  padding: 0;
  z-index: 99;
  flex-direction: column;
  gap: var(--sp-4);
}
.navbar__drawer.is-open { display: flex; }
.navbar__drawer a {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-dark);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-gray-light);
  display: block;
  text-align: center;
}
.navbar__drawer .navbar__cta { margin-top: var(--sp-2); align-self: flex-start; }

/* Mobile CTA bar — hidden on desktop */
.navbar__mobile-bar {
  display: none;
  position: fixed;
  top: 71px;
  left: 0;
  width: 100%;
  z-index: 98;
  /* padding: var(--sp-2) var(--sp-4); */
  background: var(--c-green);
  /* border-bottom: 2px solid var(--c-green); */
  box-shadow: var(--shadow-sm);
}
.navbar__mobile-bar .navbar__cta--buy {
  width: 100%;
  justify-content: center;
  height: 44px;
}

/* Spacer to offset fixed navbar */
.navbar-spacer { height: 68px; }

/* ==========================================================================
   9. CART SIDEBAR
   ========================================================================== */
.fix_cart {
  position: fixed; z-index: 200; top: 0; right: 0;
  width: 92%; max-width: 400px; height: 100%;
  background: #0e1a12;
  display: flex; flex-direction: column;
  transform: translate(110%, 0); transition: transform .4s cubic-bezier(.4,0,.2,1);
  box-shadow: -12px 0 60px rgba(0,0,0,.6);
}
.fix_cart.active { transform: translate(0,0); }

/* Content column */
.fix_cart > .inner {
  display: flex; flex-direction: column;
  flex: 1; overflow: hidden; padding: 0;
  grid-template-rows: none !important;
}

/* Header row */
.fix_cart__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

/* Close button */
.close_cart {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: none;
  color: var(--c-white); font-size: 1rem;
  cursor: pointer; flex-shrink: 0;
  transition: background .2s;
}
.close_cart:hover { background: rgba(255,255,255,.18); }

/* Title */
.fix_cart .nice {
  flex: 1;
  font-size: 1.15rem; font-weight: 800;
  color: var(--c-white); letter-spacing: -.01em;
  margin: 0;
}

/* Timer */
.fix_cart .timeleft {
  margin: 0 var(--sp-6) var(--sp-2);
  background: rgba(255,255,255,.06); border-radius: var(--r-sm);
  color: var(--c-white); font-size: .9rem; border: none;
  flex-shrink: 0;
}
.fix_cart .timeleft span { background: rgba(0,0,0,.35); color: var(--c-white); }

/* Scrollable ticket list */
.fix_cart .tickets_to_shop {
  flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  grid-row: auto !important;
}
.fix_cart .tickets_to_shop::-webkit-scrollbar { width: 4px; }
.fix_cart .tickets_to_shop::-webkit-scrollbar-track { background: transparent; }
.fix_cart .tickets_to_shop::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* Ticket card in cart */
.fix_cart .ticket_ready {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-left: 3px solid var(--c-green);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4);
  position: relative;
  margin-bottom: 0;
}
.fix_cart .is_ticket {
  border-right: 1px solid rgba(255,255,255,.12);
  padding-right: var(--sp-4);
  min-width: 90px;
}
.fix_cart .is_ticket span { font-size: .7rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 2px; }
.fix_cart .is_ticket strong { font-size: 1.6rem; font-weight: 800; letter-spacing: .04em; color: var(--c-white); display: block; }
.fix_cart .title_lottery { font-size: .82rem; color: rgba(255,255,255,.6); font-weight: 600; flex: 1; }
.fix_cart .delete {
  position: static; width: 32px; height: 32px; border-radius: var(--r-full);
  background: rgba(255,60,60,.12); color: #ff6b6b;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; border: none; cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.fix_cart .delete:hover { background: rgba(255,60,60,.25); }

/* Empty cart */
.fix_cart .empty_cart {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-4); padding: var(--sp-10) var(--sp-6);
  color: rgba(255,255,255,.35); text-align: center; font-size: .95rem;
}
.fix_cart .empty_cart i { font-size: 2.5rem; color: rgba(255,255,255,.15); }

/* Checkout footer — always at the bottom, outside the scroll area */
.fix_cart__footer {
  flex-shrink: 0;
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  border-top: 1px solid rgba(255,255,255,.07);
}
.fix_cart__checkout {
  width: 100%;
  display: flex !important;
  background: var(--c-orange) !important;
  color: var(--c-white) !important;
  height: 52px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}
.fix_cart__checkout.hidden {pointer-events:none; opacity:.3; }
.fix_cart__checkout:hover { opacity: .88; transform: translateY(-1px); }
.fix_cart.active ~ .overlay { pointer-events: all; opacity: 1; }

.timeleft {/* max-width: 190px; */display: flex;align-items: center;padding-right: var(--sp-4);border-right: 1px solid;}
.timeleft strong { font-size: .8rem; font-weight: normal; }
.timeleft span {
  padding: 0 var(--sp-4); border: 1px solid #ddd; line-height: 40px;
  margin-right: var(--sp-2); font-size: 1.1rem;
  background: var(--c-orange); border-radius: var(--r-sm); font-weight: bold; color: var(--c-white);
}
.timeleft.hidden { display: none; }

/* ==========================================================================
   10. HERO SECTION
   ========================================================================== */
.hero {
  /* background: var(--c-cream); */
  background-image: radial-gradient(ellipse 70% 60% at 78% 18%, rgba(255,160,100,.22) 0%, transparent 70%);
  min-height: calc(79vh - 68px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--sp-16) 0;
}

.hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: var(--sp-16);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1.5px solid var(--c-dark);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-4);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-dark);
  margin-bottom: var(--sp-6);
  background: var(--c-white);
}
.hero__badge::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--c-dark);
  border-radius: 50%;
}

.hero__title {
  font-size: clamp(1.7rem, 4.4vw, 4rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.03em;
  color: var(--c-dark);
  margin-bottom: var(--sp-6);
}
.hero__title em {
  font-style: italic;
  color: var(--c-orange);
}

.hero__desc {
  font-size: 1rem;
  color: #555;
  max-width: 420px;
  line-height: 1.7;
  margin-bottom: var(--sp-8);
}

.hero__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 50px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: .9rem;
  transition: opacity .2s, transform .15s;
  text-decoration: none;
  border: 2px solid var(--c-dark);
}
.hero__btn--primary {
  background: var(--c-dark);
  color: var(--c-white);
  border-color: var(--c-dark);
}
.hero__btn--primary:hover { opacity: .8; transform: translateY(-2px); }
.hero__btn--secondary {
  background: transparent;
  color: var(--c-dark);
  border-color: var(--c-dark);
}
.hero__btn--secondary:hover { opacity: .7; transform: translateY(-2px); }

/* Hero right: composition wrapper */
.hero__ticket {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--sp-4);
}

.hero__right {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Featured image card */
.hero__sorteo-img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  transform: rotate(3deg);
  box-shadow: 18px 20px 0 rgba(0,0,0,.10), 0 12px 50px rgba(0,0,0,.18);
  background: var(--c-cream-light);
  border: 4px solid var(--c-white);
}

.hero__sorteo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.hero__sorteo-img:hover img { transform: scale(1.04); }

.hero__sorteo-img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background: linear-gradient(135deg, var(--c-cream) 0%, #ecddb0 100%);
}
.hero__sorteo-img-placeholder i { font-size: 3.5rem; color: var(--c-orange); opacity: .4; }
.hero__sorteo-img-placeholder span { font-size: 1rem; font-weight: 700; color: var(--c-dark); opacity: .65; }


/* Ticket card positioned below/overlapping the image */
.hero__right .ticket-card {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: -5rem;
}

/* Ticket card (standalone, kept for global use) */
.ticket-card {
  position: relative;
  background: var(--c-orange);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  width: 100%;
  color: var(--c-white);
  transform: rotate(-4deg);
  box-shadow: -14px 14px 0 rgba(0,0,0,.14), var(--shadow-lg);
}
.ticket-card::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 2px dashed rgba(255,255,255,.4);
  border-radius: calc(var(--r-xl) - 6px);
  pointer-events: none;
}

.ticket-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--sp-10);
}

.ticket-card__label-boleto,
.ticket-card__num {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
}

.ticket-card__prize-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: var(--sp-1);
}

.ticket-card__prize-amount {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: var(--sp-3);
  letter-spacing: -.03em;
}

.ticket-card__sub {
  font-size: .78rem;
  opacity: .8;
  margin-bottom: var(--sp-8);
}

.ticket-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px dashed rgba(255,255,255,.3);
  padding-top: var(--sp-4);
}

.ticket-card__date,
.ticket-card__time {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: .9;
}

.ticket-card__hole {
  position: absolute;
  width: 22px; height: 22px;
  background: var(--c-cream);
  border-radius: 50%;
  top: 50%; right: -11px;
  transform: translateY(-50%);
}

/* ==========================================================================
   11. TICKER BAR
   ========================================================================== */
.ticker {
  background: var(--c-green);
  overflow: hidden;
  padding: var(--sp-3) 0;
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
}

.ticker__track {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  animation: ticker-scroll 50s linear infinite;
  width: max-content;
  white-space: nowrap;
}

.ticker__track span {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-white);
}

.ticker__sep {
  color: var(--c-orange) !important;
  font-size: .9rem !important;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   12. COUNTDOWN SECTION
   ========================================================================== */
.countdown-section {
  background: var(--c-cream-light);
  padding: var(--sp-16) 0;
}

.countdown-section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.countdown-section__eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-green);
  margin-bottom: var(--sp-4);
}

.countdown-section__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-dark);
  margin-bottom: var(--sp-4);
}
.countdown-section__title em {
  font-style: italic;
  color: var(--c-green);
}

.countdown-section__desc {
  font-size: .95rem;
  color: #666;
  line-height: 1.7;
  max-width: 400px;
  margin-bottom: var(--sp-6);
}

.countdown-section__date-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1.5px solid var(--c-dark);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-5);
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-dark);
}
.countdown-section__date-pill::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-green);
}

/* Timer boxes */
.countdown-timer {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.countdown-timer__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.countdown-timer__value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 78px; height: 78px;
  padding: 0 var(--sp-3);
  background: var(--c-white);
  border: 1.5px solid var(--c-gray-light);
  border-radius: var(--r-md);
  font-size: 2rem;
  font-weight: 900;
  color: var(--c-dark);
  box-shadow: var(--shadow-sm);
}

.countdown-timer__label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-gray);
}

/* Prize total card */
.prize-total {
  background: var(--c-dark);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  color: var(--c-white);
  position: relative;
  overflow: hidden;
}
.prize-total::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,72,0,.12) 0%, transparent 60%);
}
.prize-total > * { position: relative; }

.prize-total__eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-gray);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.prize-total__eyebrow::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1);
}

.prize-total__amount {
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: var(--sp-2);
}

.prize-total__currency {
  font-size: 2rem;
  font-weight: 900;
  color: var(--c-orange);
  margin-bottom: var(--sp-4);
}

.prize-total__note {
  font-size: .82rem;
  color: var(--c-gray);
  line-height: 1.5;
}

/* ==========================================================================
   13. STEPS (Como participar)
   ========================================================================== */
.steps {
  padding: var(--sp-12) 0;
  border-top: 1px solid var(--c-gray-light);
}

.steps__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.steps__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--sp-10);
  flex-wrap: wrap;
  gap: var(--sp-4);
  flex-direction: column;
}

.steps__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--c-dark);
  line-height: 1.1;
}
.steps__title-dot { color: var(--c-orange); }

.steps__subtitle {
  font-size: .88rem;
  color: var(--c-gray);
  max-width: 240px;
  /* text-align: right; */
  line-height: 1.5;
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.step-card {
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 260px;
  position: relative;
}
.step-card--neutral  { background: var(--c-cream); border: 1.5px solid var(--c-gray-light); }
.step-card--featured { background: var(--c-green); }
.step-card--muted    {background: white;border: 1.5px solid var(--c-gray-light);}

.step-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.step-card__num {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(0,0,0,.4);
}
.step-card--featured .step-card__num { color: rgba(255,255,255,.6); }

.step-card__icon {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--c-dark);
  opacity: .4;
}
.step-card--featured .step-card__icon { background: rgba(255,255,255,.2); color: var(--c-white); }

.step-card__title {
  font-size: 2.15rem;
  font-weight: 800;
  color: var(--c-dark);
  line-height: 1.2;
  margin-top: auto;
}
.step-card--featured .step-card__title { color: var(--c-white); }
.step-card--muted .step-card__title {/* color: rgba(0,0,0,.4); */}

.step-card__desc {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(0,0,0,.55);
}
.step-card--featured .step-card__desc { color: rgba(255,255,255,.82); }
.step-card--muted .step-card__desc { color: rgba(0,0,0,.35); }

/* ==========================================================================
   14. PRIZES SECTION
   ========================================================================== */
.prizes {
  background: var(--c-dark);
  padding: var(--sp-24) 0;
}

.prizes__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.prizes__title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--c-white);
  margin-bottom: var(--sp-10);
}
.prizes__title span { color: var(--c-orange); font-style: italic; }

.prizes__grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.prize-card {
  background: var(--c-card-mid);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: transform .2s, border-color .2s;
  color: #fff;
  position: relative;
}

.prize-card.has-image {
  width: calc(33% - 10px);
}

.prize-card__rank {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-gray);
}

.prize-card__amount {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--c-orange);
  line-height: 1;
  letter-spacing: -.02em;
}

.prize-card__desc {
  font-size: .82rem;
  color: rgba(255,255,255,.45);
  line-height: 1.4;
}

.prize-card__info {
  padding-right: 42%;
  font-weight:900;
  font-size: .9em;
}

.prize-card__image {
  width: 48%;
  position: absolute;
  bottom: -6%;
  right: -4%;
}

/* ==========================================================================
   15. PROMOTER CTA
   ========================================================================== */
.cta-promoter {
  background: var(--c-lime);
  padding: var(--sp-8) 0;
}

.cta-promoter__inner {
  max-width: 620px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.cta-promoter__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--c-dark);
}

.cta-promoter__title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: var(--c-dark);
  line-height: 1.2;
}

.cta-promoter__desc {
  font-size: .95rem;
  color: rgba(0,0,0,.6);
  max-width: 460px;
  line-height: 1.6;
}

.cta-promoter__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-dark);
  color: var(--c-white);
  font-weight: 700;
  font-size: .92rem;
  padding: 0 var(--sp-8);
  height: 50px;
  border-radius: var(--r-full);
  transition: opacity .2s, transform .15s;
  text-decoration: none;
}
.cta-promoter__btn:hover { opacity: .8; transform: translateY(-2px); }

/* ==========================================================================
   16. SITE FOOTER
   ========================================================================== */
.site-footer {
  background: var(--c-white);
  border-top: 1px solid var(--c-gray-light);
  padding: var(--sp-12) 0 var(--sp-8);
}

.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: var(--sp-12);
  align-items: start;
}

/* Brand column */
.site-footer__logo {
  width: 120px; height: auto;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-sm);
}
.site-footer__brand-name {
  display: block;
  font-weight: 800;
  font-size: 1rem;
  color: var(--c-dark);
  margin-bottom: var(--sp-2);
}
.site-footer__brand-desc {
  font-size: .78rem;
  color: var(--c-gray);
  line-height: 1.6;
}

/* Legal data grid */
.site-footer__legal {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5) var(--sp-8);
}
.site-footer__legal-group {
  display: flex; flex-direction: column; gap: 4px;
}
.site-footer__legal-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-dark);
}
.site-footer__legal-value {
  font-size: .8rem;
  color: var(--c-gray);
  line-height: 1.5;
}

/* Legacy col/info (kept for compat) */
.site-footer__col { }
.site-footer__col-title {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-dark); margin-bottom: var(--sp-3);
}
.site-footer__info { font-size: .78rem; color: var(--c-gray); line-height: 1.65; }

/* Copyright */
.site-footer__copy {
  font-size: .8rem;
  color: var(--c-gray);
  text-align: right;
  line-height: 1.6;
  white-space: nowrap;
  align-self: end;
}
.site-footer__legal-links {
  margin-top: .375rem;
  display: flex;
  gap: .375rem;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}
.site-footer__legal-links a {
  color: var(--c-gray);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.site-footer__legal-links a:hover {
  color: var(--c-primary, #000);
}
.site-footer__legal-links span {
  color: var(--c-gray);
  opacity: .5;
}
.site-footer__dev {
  grid-column: 1 / -1;
  text-align: center;
  font-size: .7rem;
  color: var(--c-gray);
  opacity: .6;
  padding-top: var(--sp-6);
  border-top: 1px solid currentColor;
}
.site-footer__dev a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   17. LOGIN PAGE
   ========================================================================== */
.login-page {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-16) var(--container-pad);
  background: var(--c-cream-light);
}

.login-page__inner {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.login-page__brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.login-page__logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 50%;
}

.login-page__title {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--c-dark);
  margin: 0;
}

.login-page__subtitle {
  font-size: .9rem;
  color: var(--c-gray);
}

.login-page__card {
  background: var(--c-white);
  border-radius: var(--r-xl);
  padding: var(--sp-10);
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--c-green);
}

.login-page__error {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #B91C1C;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: var(--sp-6);
}

.login-page__success {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: var(--c-green-dark);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: var(--sp-6);
}

/* Override WP login form styles */
.login-page__card #loginform,
.login-page__card .login-page__form {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.login-page__card #loginform p,
.login-page__card .login-page__form p {
  margin-bottom: var(--sp-4);
}

.login-page__card #loginform label,
.login-page__card .login-page__form label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-dark);
  margin-bottom: var(--sp-2);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.login-page__card #loginform input[type="text"],
.login-page__card #loginform input[type="password"],
.login-page__card .login-page__form input[type="text"],
.login-page__card .login-page__form input[type="password"] {
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--c-gray-light);
  border-radius: var(--r-md);
  padding: 0 var(--sp-4);
  font-family: var(--font);
  font-size: 1rem;
  color: var(--c-dark);
  background: var(--c-cream-light);
  outline: none;
  transition: border-color .2s;
  display: block;
  box-sizing: border-box;
}

.login-page__card #loginform input[type="text"]:focus,
.login-page__card #loginform input[type="password"]:focus,
.login-page__card .login-page__form input[type="text"]:focus,
.login-page__card .login-page__form input[type="password"]:focus {
  border-color: var(--c-green);
  background: var(--c-white);
}

.login-page__card #loginform .forgetmenot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .85rem;
  color: var(--c-gray);
}

.login-page__card #loginform input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--c-green);
}

.login-page__card #loginform input[type="submit"],
.login-page__card .login-page__form input[type="submit"] {
  margin-top: var(--sp-6);
  background: var(--c-green);
  color: var(--c-white);
  height: 50px;
  border-radius: var(--r-full);
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
  border: none;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  font-family: var(--font);
}

.login-page__card #loginform input[type="submit"]:hover,
.login-page__card .login-page__form input[type="submit"]:hover {
  opacity: .85;
  transform: translateY(-1px);
}

.login-page__footer-links {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-gray-light);
}

.login-page__footer-links a {
  font-size: .82rem;
  color: var(--c-gray);
  text-decoration: none;
  transition: color .2s;
}

.login-page__footer-links a:hover {
  color: var(--c-green);
  opacity: 1;
}

/* ==========================================================================
   18. INNER PAGE HELPERS
   ========================================================================== */
.nice { font-weight: 900; font-size: 2rem; color: var(--c-orange); display: block; width: 100%; margin-bottom: var(--sp-2); line-height: 1.1; font-family: var(--font); }
.nice.small { font-size: 1.5rem; }
.nice.white { color: var(--c-white); }
.nice.center { text-align: center; max-width: 600px; margin-inline: auto; }
.simple_title { font-size: 3rem; width: 100%; text-align: center; margin: var(--sp-8) 0; color: var(--c-dark); }

.content { overflow: hidden; padding: var(--sp-10) 0; }
.simple, .contacto { background: var(--c-cream-light); overflow: auto; }

.grid_prizes { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: var(--sp-4); margin-bottom: var(--sp-8); }
.grid_prizes > div { background: var(--c-white); border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--shadow-sm); border: 1px solid var(--c-gray-light); }
.grid_prizes .position { font-size: 1.5rem; font-weight: 900; color: var(--c-orange); }
.grid_prizes .prize { font-size: 1.2rem; font-weight: 800; color: var(--c-dark); }

.shop_tickets > .inner { background: var(--c-cream-light); padding: var(--sp-8); margin: 0 auto var(--sp-8); border-radius: var(--r-md); }
.tickets_list { width: 100%; display: grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap: var(--sp-5); margin: 0 auto var(--sp-8); }
.tickets_list .ticket {display: block;letter-spacing: 1px;padding: var(--sp-4);border-radius: var(--r-sm);border: 1.5px solid var(--c-gray-light);background: rgba(255,255,255,1);font-size: 1.4rem;text-align: center;cursor: pointer;transition: .3s;font-weight: 600;position: relative;}
.tickets_list .ticket:before{content:'';width:calc(100% - 10px);height:calc(100% - 10px);border: 1px dashed #ddd;position: absolute;left: 5px;top: 5px;border-radius: 7px;}
.tickets_list .ticket.selected { background: var(--c-dark); color: var(--c-white); }
.tickets_list .ticket:hover { background: var(--c-gray-light); }

.ticket_ready { border: 1px solid var(--c-gray-light); padding: var(--sp-6) var(--sp-10) var(--sp-6) var(--sp-6); border-radius: var(--r-md); position: relative; background: var(--c-white); display: flex; margin-bottom: var(--sp-6); }
.is_ticket { padding: 0 var(--sp-4); border-right: 1px solid var(--c-gray-light); }
.is_ticket strong { font-weight: 700; letter-spacing: 2px; font-size: 2rem; display: block; color: var(--c-dark); }
.delete, .delete2 { position: absolute; right: 0; top: 0; width: 40px; height: 40px; font-size: 1.3rem; color: var(--c-orange); }

.info_sorteo { display: grid; width: 100%; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); margin: var(--sp-8) 0; gap: var(--sp-4); }
.info_sorteo div {border: 1.5px solid rgba(255,255,255,.1);padding: var(--sp-4) var(--sp-4) var(--sp-4) 50px;border-radius: var(--r-md);background: var(--c-orange);color: var(--c-white);position: relative;display: flex;align-items: flex-start;flex-direction: column;justify-content: space-between;}
.info_sorteo div strong {font-size: 1.1rem;width: 100%;}
.info_sorteo div i { color: var(--c-white); font-size: 1.4rem; position: absolute; left: 14px; top: 16px; }
.info_sorteo .alert { grid-column: 1/-1; }

.subheader { width: 100%; display: flex; justify-content: space-between; background: var(--c-cream-light); align-items: center; border-radius: var(--r-md); padding: .6em; margin-bottom: var(--sp-10); position: sticky; top: 76px; box-shadow: var(--shadow-md); z-index: 2; }

.search_ticket { padding: var(--sp-4); margin-bottom: var(--sp-6); background: var(--c-orange); width: 100%; border-radius: var(--r-md); }
.search_ticket strong {font-size: 1.3rem;display: block;margin: 0 auto var(--sp-4);/* color: var(--c-white); */text-align: center;}
.search_ticket .btn { height: 40px; line-height: 40px; margin-top: var(--sp-4); }

.tickets_controls { display: flex; justify-content: space-between; }
.tickets_controls .selection { display: flex; width: 24%; align-items: center; justify-content: center; padding: var(--sp-2); background: #aaa; border-radius: var(--r-sm); border: 1px solid transparent; }
.tickets_controls .selection.active { background: var(--c-white); border-color: #ddd; }
.tickets_controls .selection label.radio { color: var(--c-dark); }

.along { padding: var(--sp-4); background: var(--c-dark); color: var(--c-white); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border-radius: var(--r-lg); margin: 0 auto var(--sp-8); }

.countback { display: flex; flex-wrap: wrap; padding: var(--sp-2); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-sm); background: rgba(0,0,0,.2); }
.countback div { width: 25%; border-right: 1px solid rgba(255,255,255,.12); padding: 0 var(--sp-2); }
.countback div:last-child { border: none; }
.countback div b { display: block; font-size: 1.3rem; font-weight: 900; }
.countback div span { font-size: .8rem; }

.claim_prices { background: var(--c-orange); padding: var(--sp-8) 0; width: 100%; text-align: center; position: relative; border-radius: var(--r-md); margin-bottom: var(--sp-10); overflow: hidden; }
.claim_prices > * { z-index: 2; position: relative; }
.claim_prices p { font-size: 1.2rem; margin-bottom: var(--sp-8); color: var(--c-white); display: block; }
.claim_prices img { position: absolute; width: 180px; }
.claim_prices .winner { left: 2%; top: -13%; }
.claim_prices .money { right: 2%; bottom: -12%; top: initial; }

.shop_totals { margin: var(--sp-10) 0; }
.shop_totals .cart_info { margin-bottom: var(--sp-6); display: flex; justify-content: space-between; padding-bottom: var(--sp-4); border-bottom: 1px solid #ccc; }
.shop_totals .cart_info span { font-weight: 900; padding: 0 var(--sp-4); font-size: 1.3rem; background: var(--c-gray-light); border-radius: var(--r-full); }

.tabs .choose { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.tabs .choose a { padding: var(--sp-2) var(--sp-5); background: var(--c-gray-light); border-radius: var(--r-full); font-weight: 700; font-size: .9rem; }
.tabs .choose a.active { background: var(--c-orange); color: var(--c-white); }

.list_winners { padding: var(--sp-6) var(--sp-6) var(--sp-2); background: var(--c-cream-light); border-radius: var(--r-lg); }
.list_winners a { display: flex; align-items: center; margin-bottom: 10px; }
.list_winners a .position { font-size: 2rem; color: var(--c-dark); width: 50px; }
.list_winners a strong { width: 200px; color: var(--c-dark); }
.list_winners a .prize { font-size: 1.3rem; color: var(--c-orange); margin-left: var(--sp-4); }

.qr { width: 140px; text-align: center; font-weight: 900; }
.qr img { width: 100%; }

/* search_proveedor kept for sorteo page */
.search_proveedor { display: flex; width: 100%; margin-bottom: var(--sp-10); }
.search_proveedor figure { width: 100%; padding: var(--sp-8) 0 0 var(--sp-8); position: relative; height: 50vh; }
.search_proveedor figure img { width: 100%; height: 100%; object-fit: cover; position: absolute; }

/* top_section for sorteo detail */
.top_section { position: relative; margin-bottom: var(--sp-10); width: 100%; }
.top_section .intro_sorteo { position: relative; width: 100%; background: var(--c-cream-light); padding: var(--sp-8); color: var(--c-dark); margin: 16em auto 0; border-radius: var(--r-lg); max-width: 640px; display: flex; flex-wrap: wrap; box-shadow: var(--shadow-lg); justify-content: center; }
.top_section .cover { position: relative; height: 100%; }
.top_section .cover img { width: 100%; height: 90%; object-fit: cover; position: absolute; object-position: center; z-index: 0; }

/* Dashboard */
.top_shop { padding: var(--sp-10) 0; background: var(--c-dark); margin-bottom: calc(-1 * var(--sp-8)); }

/* ==========================================================================
   17B. BUY PAGE (comprar-boletos) — BEM redesign
   ========================================================================== */

/* --- Hero --- */
.buy-hero {
  background: var(--c-lime);
  padding: var(--sp-12) 0 var(--sp-16);
  position: relative;
  overflow: hidden;
}
.buy-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% -20%, rgba(30,140,56,.35) 0%, transparent 70%);
  pointer-events: none;
}
.buy-hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-pad);
  position: relative; z-index: 1;
}
.buy-hero__eyebrow {
  display: block;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-green);
  margin-bottom: var(--sp-4);
}
.buy-hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--c-dark);
  margin-bottom: var(--sp-8);
  line-height: 1.05;
}
/* Override info_sorteo cardsa to match green theme */
.buy-hero .info_sorteo { margin: 0; }
.buy-hero .info_sorteo div {
  background: rgba(255,255,255,.3);
  border: 1.5px solid rgba(255,255,255,.6);
  color: var(--c-dark);
}
.buy-hero .info_sorteo div i { color: var(--c-green); }
.buy-hero .info_sorteo div.lucky i {font-size: 5rem;z-index: -1;left: -10px;top: -10px;}
.buy-hero .info_sorteo .lucky {
  background: linear-gradient(135deg, rgb(68 158 54 / 50%) 0%, rgb(30 191 6) 100%);
  border-color: rgba(34,160,64,.55);
  box-shadow: 0 6px 28px rgba(30,140,56,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
.buy-hero .info_sorteo .lucky i {filter: drop-shadow(0 0 7px rgba(40,200,80,.5));}
.buy-hero .info_sorteo .lucky span {display: block;width: 100%;color: rgba(255,255,255,.92);font-weight: 700;font-size: 1.2em;line-height: 1rem;text-shadow: 0 0 20px rgba(0,0,0,.9);margin-bottom: 1.2rem;}
.buy-hero .info_sorteo .lucky .btn {
  width: 100%;
  color: #333;
  font-size: .88rem;
  height: 36px;
  box-shadow: 0 3px 14px rgba(30,140,56,.45);
  transition: opacity .18s, box-shadow .18s;
  background: var(--c-lime);
}
.buy-hero .info_sorteo .lucky .btn:hover { opacity: .88; box-shadow: 0 5px 20px rgba(30,140,56,.6); }

/* --- Body --- */
.buy-body {
  max-width: var(--container-max);
  margin: calc(-1 * var(--sp-8)) auto var(--sp-16);
  padding: 0 var(--container-pad);
}
.buy-body__inner { display: flex; flex-direction: column; gap: var(--sp-6); }

/* Sticky subheader */
.subheader {
  background: var(--c-cream-light);
  border: 1px solid var(--c-gray-light);
  border-radius: var(--r-lg) !important;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5) !important;
  gap: var(--sp-4);
}
/* "Boletos seleccionados" label */
.tickets_selected > strong {
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-gray); white-space: nowrap; flex-shrink: 0;
}
/* Empty state hint */
.tickets_selected > em {
  font-style: normal; font-size: .85rem; color: var(--c-gray);
}
/* Container flex */
.subheader .tickets_selected {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; flex: 1;
}
/* Each selected ticket chip (created by JS as <span>) */
.tickets_selected > span {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--c-dark); color: var(--c-white);
  border-radius: var(--r-full);
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);
  white-space: nowrap;
}
/* Delete X inside chip */
.tickets_selected > span .delete {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: var(--c-white);
  font-size: .65rem; border: none; cursor: pointer;
  transition: background .2s; position: static; flex-shrink: 0;
}
.tickets_selected > span .delete:hover { background: rgba(255,80,80,.5); }
.buy-body__cart-btn {
  background: var(--c-orange);
  color: var(--c-white);
  font-size: .88rem;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--r-full) !important;
}

/* Search panel override */
.buy-search {
  background: var(--c-cream-light);
  border-radius: var(
  --r-lg) !important;
  padding: var(
  --sp-4) var(--sp-4) 0 !important;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  border: 1px solid var(--c-gray-light);
}
.buy-search__title {
  display: block;
  font-size: 1rem !important;
  font-weight: 700 !important;
  /* color: rgba(255,255,255,.55) !important; */
  text-align: left !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5) !important;
}
.buy-search__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--sp-3) !important;
}
.buy-search__option {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--sp-2) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1.5px solid rgba(0,0,0,.2) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-4) !important;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  width: auto !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.buy-search__option.active {
  background: rgba(30,140,56,.25) !important;
  border-color: #3fef69 !important;
}
/* Custom radio */
.buy-search__label {
  /* color: rgba(255,255,255,.7) !important; */
  font-size: .82rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s;
}
/* Hide native radio */
.buy-search__label input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important; height: 0 !important;
  pointer-events: none !important;
}
/* Custom dot: the <i> after the input */
.buy-search__label i {
  display: inline-flex !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(0,0,0,.3) !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color .2s, background .2s !important;
  position: relative; /* override .forms label.radio i */
  background: transparent !important;
  padding: 0 !important;
}
.buy-search__label i::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-green);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s, transform .2s;
  display: block;
  position: absolute;
  left: 2px;
  top: 2px;
}
.buy-search__label input[type="radio"]:checked + i {
  border-color: var(--c-green) !important;
}
.buy-search__label input[type="radio"]:checked + i::after {
  opacity: 1;
  transform: scale(1);
}
/* Active option full highlight */
.buy-search__option.active .buy-search__label {
  /* color: var(--c-white) !important; */
}
.buy-search__input {
  width: 100% !important;
  height: 40px !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  background: rgba(0,0,0,.12) !important;
  /* color: var(--c-white) !important; */
  font-family: var(--font) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 0 var(--sp-3) !important;
  text-align: center;
  letter-spacing: .1em;
  outline: none;
  transition: background .2s;
}
.buy-search__input::placeholder { color: rgba(0,0,0,.3); }
.buy-search__input:focus { background: rgba(255,255,255,.2) !important; }
.buy-search__input:disabled { opacity: .4; cursor: not-allowed; }
.buy-search__footer {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  justify-content: center;
  flex-direction: column;
}
.buy-search__btn {
  background: var(--c-green) !important;
  color: var(--c-white) !important;
  border-color: var(--c-green) !important;
  height: 44px !important;
  min-width: 160px;
}
.buy-search__btn:disabled { opacity: .5; pointer-events: none; }
.buy-search .search_msg {color: rgba(255,255,255,.65);font-size: .9rem;width: 100%;}

/* Tickets grid */
.tickets_list .ticket { border-radius: var(--r-md); border-color: var(--c-gray-light); font-size: 1.25rem; }
.tickets_list .ticket.selected { background: var(--c-green); color: var(--c-white); border-color: var(--c-green); }
.tickets_list .ticket:hover {background: var(--c-lime);border-color: var(--c-green);}

/* Bottom actions row */
.buy-body__actions {
  display: flex; gap: var(--sp-4); justify-content: center;
  padding: var(--sp-4) 0 var(--sp-8);
  flex-wrap: wrap;
}
.buy-body__more {
  background: transparent;
  border: 2px solid var(--c-gray-light);
  color: var(--c-dark);
}
.buy-body__more:hover { border-color: var(--c-green); color: var(--c-green); opacity: 1; }
.buy-body__add {
  background: var(--c-orange);
  color: var(--c-white);
}

/* Error state */
.buy-error {
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
}
.buy-error__inner {
  text-align: center; max-width: 480px;
  padding: var(--sp-12) var(--sp-8);
}
.buy-error__icon {
  font-size: 3rem; color: var(--c-green);
  display: block; margin-bottom: var(--sp-6);
}
.buy-error__title { font-size: 1.8rem; margin-bottom: var(--sp-4); }
.buy-error p { color: var(--c-gray); margin-bottom: var(--sp-8); }

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .hero__inner { gap: var(--sp-10); }
  .prizes__grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  .navbar__actions {justify-self:flex-end;margin-left: auto;}
  .navbar__nav { display: none; }
  .navbar__toggle { display: flex; }

  /* Hide buy button from navbar, show the full-width mobile bar instead */
  .navbar__actions .navbar__cta--buy { display: none; }
  .navbar__mobile-bar {display: block;box-shadow: 0 0 20px rgba(0,0,0,.4);}
  .navbar-spacer {/* height: 80px; */}

  /* Push drawer below both navbar + mobile bar */
  .navbar__drawer {top: 110px;}

  .buy-search__grid { grid-template-columns: repeat(2, 1fr) !important; }

  .hero {padding: 50px 0 30px;}
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__badge { margin-inline: auto; }
  .hero__desc { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__ticket { order: -1; }
  .hero__right { align-items: center; }
  .hero__sorteo-img {transform: none;/* max-width: 340px; */}
  .hero__sorteo-img:hover img { transform: none; }
  .hero__right .ticket-card {width: 100%;/* max-width: 280px; */margin-top: -40px;}
  .ticket-card {/* max-width: 280px; */}
  .ticket-card__prize-amount {font-size: 2.8rem;}

  .countdown-section__inner { grid-template-columns: 1fr; gap: var(--sp-10); }
  .countdown-timer__value { min-width: 64px; height: 64px; font-size: 1.6rem; }

  .steps__grid { grid-template-columns: 1fr; }
  .steps__header {/* flex-direction: column; */}
  .steps__subtitle { text-align: left; }

  .prizes__grid { grid-template-columns: repeat(2,1fr); }

  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__copy { text-align: left; }

  .col_2, .col_3, .col_4, .col_aside { width: 100%; }
  aside { width: 100%; }
}

@media (max-width: 480px) {
  :root { --container-pad: 4%; }
  .prizes{padding: var(--sp-12) 0;}
  .prizes__grid {grid-template-columns: 1fr;display: grid;gap: var(--sp-2);}
  .prize-card.has-image {width:100%}
  .countdown-timer__value { min-width: 54px; height: 54px; font-size: 1.3rem; }
  .hero__title {font-size: 2.8rem;}
  .hero__sorteo-img {/* max-width: 300px; */}
  .hero__right .ticket-card {/* max-width: 260px; */padding: 24px;}
  .ticket-card {/* max-width: 260px; */}
  .subheader{flex-direction: column;}
}

/* ============================================================
   CHECKOUT / ROTULACION
   ============================================================ */
.checkout-hero {
  background: var(--c-lime);
  padding: var(--sp-12) 0 var(--sp-16);
  position: relative;
  overflow: hidden;
}
.checkout-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% -20%, rgba(30,140,56,.35) 0%, transparent 70%);
  pointer-events: none;
}
.checkout-hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-pad);
  position: relative; z-index: 1;
}
.checkout-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(0,0,0,.4);
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: var(--sp-5);
}
.checkout-hero__breadcrumb .active { color: var(--c-green); }
.checkout-hero__breadcrumb i { font-size: .65rem; opacity: .5; }
.checkout-hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  /* font-style: italic; */
  color: var(--c-dark);
  margin: 0 0 var(--sp-6);
  line-height: 1.05;
}
.checkout-hero__timer {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(30,140,56,.12);
  border: 1.5px solid rgba(30,140,56,.3);
  color: var(--c-green-dark);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-full);
  font-size: .9rem;
  font-weight: 700;
  width: 100%;
  max-width: 320px;
}
.checkout-hero__timer strong { color: rgba(0,0,0,.45); font-weight: 400; font-size: .8rem; }

.checkout-body { background: var(--c-cream-light); padding: var(--sp-10) 0 var(--sp-20); }
.checkout-body__inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-8);
  align-items: start;
}
.checkout-body__inner aside { width: auto; }

/* Ticket column */
.checkout-tickets__heading {
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  grid-column: 1/-1;
  margin: 0;
  width: 100%;
}
.checkout-tickets { position:sticky; top:100px;}
.checkout-tickets__heading span { color: var(--c-gray); font-weight: 400; }
.checkout-tickets__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: rgba(30,140,56,.07);
  border-left: 3px solid var(--c-green);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: .84rem;
  color: var(--c-gray);
  grid-column: 1/-1;
}
.checkout-tickets__notice i { color: var(--c-green); margin-top: 2px; flex-shrink: 0; }
.checkout-tickets__empty {
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  color: var(--c-gray);
  background: var(--c-white);
  border-radius: var(--r-md);
  border: 1px solid var(--c-gray-light);
}
.checkout-tickets__empty i { font-size: 3rem; display: block; margin-bottom: var(--sp-4); opacity: .3; }

/* Individual ticket card */
.checkout-ticket-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-light);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6);
  align-items: center;
  margin-bottom: var(--sp-4);
  transition: border-color .2s, box-shadow .2s;
  position: relative;
}
.checkout-ticket-card.pending, .checkout-ticket-card.almost {
  display: flex;
  flex-direction:column;
  gap: var(--sp-4);
  font-size: 1.2rem;
  font-weight: 900;
  background: var(--c-lime);
  margin: var(--sp-4) 0;
}
.checkout-ticket-card.pending i{ font-size:2rem}
.checkout-ticket-card:hover { border-color: var(--c-green); box-shadow: 0 2px 12px rgba(30,140,56,.1); }
.checkout-ticket-card__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 88px;
  padding-right: var(--sp-6);
  border-right: 1px solid var(--c-gray-light);
  gap: var(--sp-1);
}
.checkout-ticket-card__badge {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-gray);
}
.checkout-ticket-card__num {
  font-size: 1.6rem;
  font-weight: 900;
  font-style: italic;
  color: var(--c-dark);
}
.checkout-ticket-card__sorteo { font-size: .72rem; color: var(--c-gray); text-align: center; }
.checkout-ticket-card__right { display: flex; flex-direction: column; gap: var(--sp-2); }
.checkout-ticket-card__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-gray);
}
.checkout-ticket-card__input {
  border: 1.5px solid var(--c-gray-light);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: .95rem;
  font-family: var(--font);
  width: 100%;
  outline: none;
  background: var(--c-cream-light);
  transition: border-color .2s, background .2s;
}
.checkout-ticket-card__input:focus { border-color: var(--c-green); background: var(--c-white); }
.checkout-ticket-card__delete {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: transparent;
  /* border: 1.5px solid #e8e2d4; */
  color: #c00;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.checkout-ticket-card__delete:hover { background: #fee; border-color: #c00; }

/* Summary sidebar */
.checkout-summary {
  position: sticky;
  top: calc(var(--sp-4) + 72px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.checkout-summary__card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-light);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
.checkout-summary__title {
  font-size: .95rem;
  font-weight: 700;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-gray-light);
  margin: 0;
}
.checkout-summary__subtitle {
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* color: var(--c-white); */
}
.checkout-summary__optional { font-weight: 400; font-size: .75rem; color: rgba(255,255,255,.5); }
.checkout-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid #f0ebe0;
  font-size: .88rem;
}
.checkout-summary__row:last-child { border-bottom: none; }
.checkout-summary__row--total {
  font-size: 1rem;
  font-weight: 700;
  padding-top: var(--sp-4);
}
.checkout-summary__promotor-input {
  width: 100%;
  border: 1.5px solid var(--c-gray-light);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: .9rem;
  font-family: var(--font);
  outline: none;
  background: var(--c-cream-light);
  transition: border-color .2s;
}
.checkout-summary__promotor-input:focus { border-color: var(--c-green); background: var(--c-white); }

/* Promotor card: destacada para que el usuario no la pase por alto */
.checkout-summary__card.promotor {
  position: relative;
  background: linear-gradient(135deg, var(--c-dark-green), var(--c-green-dark));
  border: 1.5px solid var(--c-lime);
  box-shadow: 0 0 0 4px rgba(189, 229, 90, .12), 0 8px 24px rgba(12, 31, 16, .25);
  overflow: hidden;
  animation: promotorPulse 2.4s ease-in-out infinite;
}
.checkout-summary__card.promotor::before {
  content: '\2605  ¿Tienes promotor?';
  position: absolute;
  top: 0;
  right: 0;
  background: var(--c-lime);
  color: var(--c-dark);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: var(--sp-1) var(--sp-3);
  border-bottom-left-radius: var(--r-sm);
}
.checkout-summary__card.promotor .checkout-summary__subtitle {
  color: var(--c-white);
  margin-top: var(--sp-2);
}
.checkout-summary__card.promotor .checkout-summary__subtitle i {
  color: var(--c-lime);
}
.checkout-summary__card.promotor .checkout-summary__optional {
  color: rgba(255, 255, 255, .55);
}
.checkout-summary__card.promotor .checkout-summary__promotor-input {
  background: var(--c-white);
  border-color: var(--c-lime);
}
.checkout-summary__card.promotor .checkout-summary__promotor-input:focus {
  border-color: var(--c-lime);
  box-shadow: 0 0 0 3px rgba(189, 229, 90, .35);
}
@keyframes promotorPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(189, 229, 90, .12), 0 8px 24px rgba(12, 31, 16, .25); }
  50% { box-shadow: 0 0 0 7px rgba(189, 229, 90, .22), 0 8px 28px rgba(12, 31, 16, .3); }
}
.checkout-summary__payment-card {
  /* background: var(--c-dark-green); */
  border-color: 1px solid var(--c-gray-light);
  /* color: #fff; */
}
.checkout-summary__pay-btn {
  width: 100%;
  margin-top: var(--sp-5);
  background: var(--c-lime);
  color: var(--c-dark);
  border-color: var(--c-lime);
  font-size: 1rem;
  font-weight: 700;
  height: 52px;
  justify-content: center;
}
.checkout-summary__pay-btn:hover { background: var(--c-green); border-color: var(--c-green); color: var(--c-white); }
.checkout-summary__payment-msg { font-size: .82rem; color: #f88; margin-top: var(--sp-3); text-align: center; min-height: 1.2em; }

/* ============================================================
   SUCCESS PAGE (COMPRA TERMINADA)
   ============================================================ */
.success-hero {
  background: var(--c-dark-green);
  padding: var(--sp-12) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.success-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(30,140,56,.5) 0%, transparent 55%);
}
.success-hero__inner { position: relative; z-index: 1; }
.success-hero__icon { font-size: 4.5rem; color: var(--c-lime); margin-bottom: var(--sp-5); }
.success-hero__title {
  font-size: 2.8rem;
  font-weight: 900;
  font-style: italic;
  color: var(--c-white);
  margin-bottom: var(--sp-4);
}
.success-hero__desc { color: rgba(255,255,255,.65); font-size: 1.05rem; max-width: 500px; margin: 0 auto; }

.success-body {padding: var(--sp-10) 0;background: var(--c-cream-light);}
.success-body__inner {max-width: 700px;margin: 0 auto;}
.success-card {
  background: var(--c-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-gray-light);
  padding: var(--sp-10) var(--sp-8);
  margin-bottom: var(--sp-6);
  text-align: center;
}
.success-card__icon { font-size: 2.5rem; color: var(--c-green); margin-bottom: var(--sp-4); }
.success-card__title { font-size: 1.3rem; font-weight: 700; margin-bottom: var(--sp-6); }
.success-card__note { margin-top: var(--sp-6); font-size: .85rem; color: var(--c-gray); }
.success-card__note a { color: var(--c-green); }
.success-actions { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }
.success-actions__btn { min-width: 200px; justify-content: center; }
.success-actions__btn--secondary {
  background: transparent;
  border-color: var(--c-gray-light);
  color: var(--c-dark);
}
.success-actions__btn--secondary:hover { border-color: var(--c-green); color: var(--c-green); }

/* ============================================================
   ACCOUNT PAGES (MIS COMPRAS / MIS BOLETOS GANADOS)
   ============================================================ */
.account-hero {
  background: var(--c-dark-green);
  padding: var(--sp-12) 0 var(--sp-10);
  position: relative;
  overflow: hidden;
}
.account-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(30,140,56,.2) 0%, transparent 60%);
}
.account-hero__inner { position: relative; z-index: 1; }
.account-hero__eyebrow {
  display: block;
  color: var(--c-lime);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.account-hero__title {
  font-size: 2.2rem;
  font-weight: 900;
  font-style: italic;
  color: var(--c-white);
  margin: 0;
}

.account-body { padding: var(--sp-10) 0 var(--sp-20); background: var(--c-cream-light); }
.account-body__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.account-body__inner aside { width: auto; }

/* Account sidebar nav */
.account-nav .options_account { position: sticky; top: 90px; }
.account-nav .opts {
  background: var(--c-white);
  border: 1px solid var(--c-gray-light);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.account-nav .opts a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  color: var(--c-dark);
  text-decoration: none;
  font-size: .88rem;
  border-bottom: 1px solid #f0ebe0;
  transition: background .15s, color .15s;
}
.account-nav .opts a:last-child { border-bottom: none; }
.account-nav .opts a:hover { background: var(--c-cream-light); color: var(--c-green); }
.account-nav .opts a.active { background: var(--c-green); color: var(--c-white); font-weight: 600; }
.account-nav .opts a i { width: 18px; text-align: center; flex-shrink: 0; }

/* Account content */
.account-content__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-gray-light);
}
.account-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.account-stat-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-light);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.account-stat-card i { font-size: 1.3rem; color: var(--c-green); }
.account-stat-card span { font-size: .78rem; color: var(--c-gray); text-transform: uppercase; letter-spacing: .06em; }
.account-stat-card strong { font-size: 1.6rem; font-weight: 900; }

/* account form -------------------------------- */
.account-form { display: flex; flex-direction: column; gap: var(--sp-6); }

.account-form__card {
  background: var(--c-white);
  border-radius: var(--r-md);
  border: 1px solid var(--c-gray-light);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}

.account-form__section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-dark-green);
  margin-bottom: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.account-form__section-title i { color: var(--c-green); }

.account-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

.account-form__field { display: flex; flex-direction: column; gap: var(--sp-2); }

.account-form__label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-gray);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.account-form__input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-gray-light);
  border-radius: var(--r-sm);
  font-size: .95rem;
  background: var(--c-cream-light);
  color: var(--c-dark);
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.account-form__input:focus {
  outline: none;
  border-color: var(--c-green);
  box-shadow: 0 0 0 3px rgba(30,140,56,.12);
  background: var(--c-white);
}
.account-form__input[readonly] {
  opacity: .6;
  cursor: default;
}

.account-form__actions { margin-top: var(--sp-6); display: flex; justify-content: flex-end; }

@media (max-width: 600px) {
  .account-form__row { grid-template-columns: 1fr; }
  .account-form__card { padding: var(--sp-6) var(--sp-5); }
}

/* user search -------------------------------- */
.user-search {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--c-white);
  border: 1px solid var(--c-gray-light);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-6);
  max-width: 480px;
  transition: border-color .2s, box-shadow .2s;
}
.user-search:focus-within {
  border-color: var(--c-green);
  box-shadow: 0 0 0 3px rgba(30,140,56,.12);
}
.user-search i.fa-search { color: var(--c-gray); font-size: .9rem; }
.user-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: .92rem;
  color: var(--c-dark);
  padding: var(--sp-2) 0;
}
.user-search__input:focus { outline: none; }
.user-search__btn { flex-shrink: 0; }

@media (max-width: 600px) {
  .user-search { max-width: 100%; flex-wrap: wrap; border-radius: var(--r-md); }
  .user-search__btn { width: 100%; justify-content: center; }
}

/* user list -------------------------------- */
.user-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.user-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-light);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  transition: box-shadow .2s, border-color .2s;
}
.user-card:hover { box-shadow: 0 2px 12px rgba(30,140,56,.1); border-color: var(--c-green); }
.user-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-cream-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-green);
  font-size: 1.1rem;
}
.user-card__info { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; min-width: 160px; }
.user-card__name { font-size: 1rem; font-weight: 700; color: var(--c-dark); margin: 0; }
.user-card__role {
  font-size: .72rem;
  font-weight: 600;
  color: var(--c-gray);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--c-cream-light);
  padding: 2px var(--sp-3);
  border-radius: var(--r-full);
  width: fit-content;
}
.user-card__actions { display: flex; gap: var(--sp-3); flex-shrink: 0; margin-left: auto; }

@media (max-width: 600px) {
  .user-card { flex-direction: column; align-items: flex-start; }
  .user-card__actions { width: 100%; }
  .user-card__actions .btn { flex: 1; justify-content: center; }
}

/* account empty -------------------------------- */
.account-empty {
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  color: var(--c-gray);
  background: var(--c-white);
  border-radius: var(--r-md);
  border: 1px solid var(--c-gray-light);
}
.account-empty i { font-size: 3rem; display: block; margin-bottom: var(--sp-4); opacity: .25; }
.account-empty p { margin-bottom: var(--sp-5); }

.account-tickets { display: flex; flex-direction: column; gap: var(--sp-4); }
.account-ticket-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-light);
  border-left: 4px solid var(--c-green);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  transition: box-shadow .2s;
}
.account-ticket-card:hover { box-shadow: 0 2px 12px rgba(30,140,56,.1); }
.account-ticket-card__num {
  display: flex;
  flex-direction: column;
  min-width: 80px;
  padding-right: var(--sp-6);
  border-right: 1px solid var(--c-gray-light);
}
.account-ticket-card__num span { font-size: .7rem; color: var(--c-gray); text-transform: uppercase; letter-spacing: .07em; }
.account-ticket-card__num strong { font-size: 1.5rem; font-weight: 900; font-style: italic; }
.account-ticket-card__info { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; min-width: 120px; }
.account-ticket-card__label { font-size: .7rem; color: var(--c-gray); text-transform: uppercase; letter-spacing: .06em; }
.account-ticket-card__btn { margin-left: auto; flex-shrink: 0; }

/* Responsive overrides */
@media (max-width: 900px) {
  .navbar__brand img{width:120px}
  .checkout-body__inner { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
  .account-body__inner { grid-template-columns: 1fr; }
  .account-nav .options_account { position: static; }
  .account-nav .opts { flex-direction: row; flex-wrap: wrap; }
  .account-nav .opts a { border-bottom: none; border-right: 1px solid #f0ebe0; font-size: .82rem; padding: var(--sp-3) var(--sp-4); }
  .account-hero {padding-top:80px}
}
@media (max-width: 600px) {
  .checkout-ticket-card {grid-template-columns: 1fr;justify-content: center;align-items: center;}
  .checkout-ticket-card__left {/* display: none; */border: none;}
  .checkout-hero__title { font-size: 1.6rem; }
  .success-hero__title { font-size: 2rem; }
  .success-hero__icon { font-size: 3rem; }
  .account-hero__title { font-size: 1.6rem; }
  .account-stats { grid-template-columns: 1fr; }
  .account-ticket-card { flex-direction: column; align-items: flex-start; }
  .account-ticket-card__btn { width: 100%; justify-content: center; }
  .account-ticket-card__num { border-right: none; padding-right: 0; }

  .guest-modal .content_lightbox{width:95%;max-height: 98vh;padding: var(--sp-6);}
}

/* ============================================================
   LEGAL PAGE
   ============================================================ */
.legal-hero {
  background: var(--c-dark-green);
  padding: var(--sp-16) 0 var(--sp-12);
  position: relative;
  overflow: hidden;
}
.legal-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 40%, rgba(30,140,56,.2) 0%, transparent 60%);
}
.legal-hero__inner { position: relative; z-index: 1; }
.legal-hero__eyebrow {
  display: block;
  color: var(--c-lime);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.legal-hero__title {
  font-size: 2.4rem;
  font-weight: 900;
  font-style: italic;
  color: var(--c-white);
  margin: 0;
  max-width: 700px;
}

.legal-body {
  background: var(--c-cream-light);
  padding: var(--sp-12) 0 var(--sp-20);
}
.legal-body__inner {/* max-width: 980px; */margin: 0 auto;}

/* Prose styles for WP content */
.legal-content {
  background: var(--c-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-gray-light);
  padding: var(--sp-10) var(--sp-12);
  line-height: 1.8;
  color: var(--c-dark);
}
.legal-content h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: var(--sp-10) 0 var(--sp-4);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-gray-light);
  color: var(--c-dark);
}
.legal-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: var(--sp-6) 0 var(--sp-2);
  color: var(--c-dark);
}
.legal-content p { margin-bottom: var(--sp-4); font-size: .95rem; }
.legal-content ul,
.legal-content ol {
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.legal-content li { margin-bottom: var(--sp-2); font-size: .95rem; }
.legal-content a { color: var(--c-green); text-decoration: underline; }
.legal-content strong { font-weight: 700; }
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-6) 0;
  font-size: .88rem;
}
.legal-content th {
  background: var(--c-dark-green);
  color: var(--c-white);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-weight: 600;
}
.legal-content td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-gray-light);
}
.legal-content tr:nth-child(even) td { background: var(--c-cream-light); }

@media (max-width: 768px) {
  .legal-content { padding: var(--sp-6) var(--sp-5); border-radius: var(--r-md); }
  .legal-hero__title { font-size: 1.8rem; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-hero {
  background: var(--c-lime);
  padding: var(--sp-16) 0 var(--sp-12);
  position: relative;
  overflow: hidden;
}
.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(30,140,56,.25) 0%, transparent 60%);
}
.contact-hero__inner { position: relative; z-index: 1; }
.contact-hero__eyebrow {
  display: block;
  color: var(--c-gray);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.contact-hero__title {
  font-size: 2.4rem;
  font-weight: 900;
  font-style: italic;
  color: var(--c-dark);
  margin: 0 0 var(--sp-4);
}
.contact-hero__desc {color: var(--c-dark);font-size: .95rem;max-width: 460px;}

.contact-body {
  background: var(--c-cream-light);
  padding: var(--sp-12) 0 var(--sp-20);
}
.contact-body fieldset{
  border: none
}
.contact-body__inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.contact-body__inner aside {
  width: auto;
}

/* Info sidebar */
.contact-info__card {
  background: var(--c-dark-green);
  border-radius: var(--r-lg);
  padding: 2rem;
  position: sticky;
  top: 90px;
  color: var(--c-white);
}
.contact-info__heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-lime);
  margin-bottom: var(--sp-6);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .82rem;
  line-height: 1.4rem;
}
.contact-info__item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  margin-bottom: var(--sp-6);
}
.contact-info__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: rgba(189,229,90,.12);
  border: 1px solid rgba(189,229,90,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-lime);
  font-size: .9rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.contact-info__label {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
  margin-bottom: var(--sp-1);
  font-weight: 600;
}
.contact-info__value {
  font-size: .9rem;
  color: rgba(255,255,255,.85);
  line-height: 1.5;
}
a.contact-info__value:hover { color: var(--c-lime); }
.contact-info__divider {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: var(--sp-6) 0;
}
.contact-info__legal {
  margin-bottom: var(--sp-4);
}
.contact-info__legal strong {
  display: block;
  font-size: .88rem;
  color: rgba(255,255,255,.75);
  margin-top: var(--sp-1);
}

/* Form area */
.contact-form-area__card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-light);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
}
.contact-form-area__title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-gray-light);
}

/* Reset theme .forms label card-style inside contact form */
.contact-form-area__content label {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: var(--sp-4) !important;
  overflow: visible !important;
  /* match account-form__label */
  font-size: .78rem !important;
  font-weight: 600 !important;
  color: var(--c-gray) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  display: block !important;
  height: auto !important;
  padding: 0 !important;
}
.contact-form-area__content label.required::before { content: none; }

/* Reset theme input styles — match account-form__input exactly */
.contact-form-area__content input[type="text"],
.contact-form-area__content input[type="email"],
.contact-form-area__content input[type="tel"],
.contact-form-area__content textarea,
.contact-form-area__content select {
  border: 1px solid var(--c-gray-light) !important;
  border-radius: var(--r-sm) !important;
  padding: var(--sp-3) var(--sp-4) !important;
  height: auto !important;
  font-size: .95rem;
  font-family: var(--font);
  width: 100%;
  outline: none;
  background: var(--c-cream-light) !important;
  color: var(--c-dark);
  transition: border-color .2s, box-shadow .2s, background .2s;
  display: block;
  margin-bottom: 0;
  box-sizing: border-box;
}
.contact-form-area__content input:focus,
.contact-form-area__content textarea:focus,
.contact-form-area__content select:focus {
  border-color: var(--c-green) !important;
  box-shadow: 0 0 0 3px rgba(30,140,56,.12) !important;
  background: var(--c-white) !important;
}
.contact-form-area__content textarea { min-height: 130px; resize: vertical; }

/* CF7 wrappers — remove extra spacing */
.contact-form-area__content .wpcf7 { max-width: 100%; }
.contact-form-area__content .wpcf7-form p { margin-bottom: var(--sp-4); }
.contact-form-area__content .wpcf7-form p:last-child { margin-bottom: 0; }
.contact-form-area__content .wpcf7-form-control-wrap { display: block; width: 100%; }
.contact-form-area__content span.wpcf7-not-valid-tip { font-size: .78rem; color: #c00; margin-top: var(--sp-1); display: block; }
.contact-form-area__content .wpcf7-response-output { font-size: .85rem; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); margin-top: var(--sp-4); }

/* Submit button */
.contact-form-area__content input[type="submit"],
.contact-form-area__content button[type="submit"],
.contact-form-area__content .wpcf7-submit {
  background: var(--c-lime) !important;
  color: var(--c-dark) !important;
  border: 2px solid var(--c-lime) !important;
  border-radius: var(--r-full) !important;
  padding: 0 var(--sp-8) !important;
  height: 48px !important;
  font-size: .95rem;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  transition: background .2s, color .2s, border-color .2s;
  box-sizing: border-box;
}
.contact-form-area__content input[type="submit"]:hover,
.contact-form-area__content button[type="submit"]:hover,
.contact-form-area__content .wpcf7-submit:hover {
  background: var(--c-green) !important;
  border-color: var(--c-green) !important;
  color: var(--c-white) !important;
}

@media (max-width: 900px) {
  .contact-body__inner { grid-template-columns: 1fr; }
  .contact-info__card { position: static; }
  .contact-form-area__card { padding: var(--sp-6) var(--sp-5); border-radius: var(--r-md); }
  .contact-hero__title { font-size: 1.8rem; }
}