/* =========================================================
   Mariachi Santiago — Estilos
   Paleta: rojo #D52B1E · verde #006847 · blanco · oro #C9A227
   ========================================================= */
:root {
  --bg:        #16110d;
  --bg-soft:   #1d1611;
  --surface:   #211913;
  --text:      #f7f3ec;
  --muted:     #b9ac9a;
  --border:    rgba(201,162,39,0.18);

  --mex-red:   #D52B1E;
  --mex-green: #006847;
  --gold:      #C9A227;
  --gold-2:    #E6C04A;
  --gold-dark: #8c6f17;

  --grad-hero:    linear-gradient(135deg, rgba(20,12,8,.78), rgba(0,40,28,.55));
  --grad-section: linear-gradient(180deg, #16110d, #100c08);
  --grad-gold:    linear-gradient(135deg, var(--gold-2), var(--gold-dark));
  --grad-flag:    linear-gradient(90deg, var(--mex-green), var(--gold), var(--mex-red));

  --shadow-elegant: 0 20px 60px -20px rgba(0,0,0,.65);
  --shadow-gold:    0 10px 36px -10px rgba(201,162,39,.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.font-display { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.01em; }
.text-gold { color: var(--gold) !important; }
.text-muted-soft { color: var(--muted) !important; }
.border-soft { border-color: var(--border) !important; }
.border-gold-soft { border: 1px solid rgba(201,162,39,.25) !important; }
.shadow-elegant { box-shadow: var(--shadow-elegant) !important; }

/* ---------- NAVBAR ---------- */
.navbar {
  background: transparent;
  transition: background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
  padding: 1rem 0;
}
.navbar.scrolled {
  background: rgba(22,17,13,.85);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 30px rgba(0,0,0,.35);
  border-bottom: 1px solid var(--border);
}
.navbar .nav-link {
  color: rgba(247,243,236,.85) !important;
  font-weight: 500;
  transition: color .2s;
}
.navbar .nav-link:hover { color: var(--gold) !important; }
.brand-text { font-family: 'Playfair Display', serif; font-weight: 700; }
.brand-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--grad-gold); color: #1a130a; font-weight: 800;
  box-shadow: var(--shadow-gold);
  font-family: 'Playfair Display', serif;
}
.brand-logo-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 34px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(201,162,39,.34);
  background: rgba(0,0,0,.55);
  box-shadow: 0 8px 24px rgba(201,162,39,.24);
}
.brand-logo-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 52%, rgba(230,192,74,.22), transparent 62%);
  pointer-events: none;
}
.brand-logo-mark img {
  width: 88px;
  max-width: none;
  height: auto;
  transform: translateY(1px);
  mix-blend-mode: screen;
}

/* ---------- BOTONES ---------- */
.btn-gold {
  background: var(--grad-gold);
  color: #1a130a;
  border: none;
  font-weight: 600;
  box-shadow: var(--shadow-gold);
  transition: transform .2s, opacity .2s;
}
.btn-gold:hover { transform: translateY(-1px); opacity: .95; color: #1a130a; }
.btn-outline-light { border-width: 1.5px; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: var(--grad-hero),
              linear-gradient(180deg, transparent 40%, var(--bg) 100%);
}
.hero-logo-wrap {
  position: relative;
  width: min(780px, 94vw);
  margin: clamp(1.25rem, 4vw, 2.4rem) auto 0;
  padding: clamp(.25rem, 1vw, .6rem);
  isolation: isolate;
}
.hero-logo-wrap::before,
.hero-logo-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  height: 62%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  pointer-events: none;
}
.hero-logo-wrap::before {
  z-index: -2;
  background:
    radial-gradient(circle, rgba(230,192,74,.34), rgba(201,162,39,.08) 42%, transparent 70%),
    conic-gradient(from 90deg, rgba(0,104,71,.55), rgba(201,162,39,.55), rgba(213,43,30,.55), rgba(0,104,71,.55));
  filter: blur(28px);
  opacity: .88;
  animation: logoAura 7s ease-in-out infinite;
}
.hero-logo-wrap::after {
  z-index: -1;
  border: 1px solid rgba(201,162,39,.26);
  box-shadow: inset 0 0 28px rgba(201,162,39,.16), 0 0 48px rgba(201,162,39,.18);
  opacity: .75;
}
.hero-logo {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(201,162,39,.36));
  animation: logoFloat 5.5s ease-in-out infinite;
}
@keyframes logoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes logoAura { 0%,100%{opacity:.72; transform:translate(-50%,-50%) scale(.98)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.04)} }
.hero-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem 1rem; border-radius: 999px;
  border: 1px solid rgba(201,162,39,.4);
  background: rgba(22,17,13,.45);
  backdrop-filter: blur(6px);
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.hero-pill .dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--gold);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.hero-stats {
  display: flex; justify-content: center; gap: 2rem;
  color: rgba(247,243,236,.75); font-size: .9rem;
}
.flag-bar    { height: 4px; background: var(--grad-flag); }
.flag-bar-thin { height: 2px; background: var(--grad-flag); opacity: .7; border-radius: 2px; margin-top: .5rem; }

/* ---------- SECCIONES ---------- */
.section { padding: 6rem 0; }
.section-dark { background: var(--grad-section); position: relative; }
.section-dark::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--grad-flag); opacity: .55;
}
.eyebrow {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .75rem;
  margin-bottom: .5rem;
  font-weight: 600;
}

/* ---------- CARRUSEL ---------- */
.carousel-img {
  height: clamp(260px, 55vw, 540px);
  object-fit: cover;
}
.carousel-caption-bg {
  position: absolute; inset: auto 0 0 0;
  padding: 1.5rem 2rem;
  background: linear-gradient(to top, rgba(16,12,8,.92), transparent);
  text-align: left; color: #fff;
}
.carousel-caption-bg h3 { margin: 0; font-size: clamp(1.1rem, 2vw, 1.6rem); }

/* ---------- SERVICIOS ---------- */
.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  box-shadow: var(--shadow-elegant);
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201,162,39,.55);
}
.service-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--grad-gold); color: #1a130a;
  font-size: 1.5rem; box-shadow: var(--shadow-gold);
}

/* ---------- PAQUETES ---------- */
.pkg-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem;
  box-shadow: var(--shadow-elegant);
  transition: transform .25s, border-color .25s;
}
.pkg-card:hover { transform: translateY(-4px); border-color: rgba(201,162,39,.55); }
.pkg-featured {
  background: var(--grad-gold);
  color: #1a130a;
  border: 1px solid var(--gold);
  box-shadow: var(--shadow-gold);
  transform: scale(1.02);
}
.pkg-featured .pkg-duration,
.pkg-featured p { color: rgba(26,19,10,.85); }
.pkg-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--bg); color: var(--gold);
  border: 1px solid var(--gold);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  padding: .25rem .75rem; border-radius: 999px; text-transform: uppercase;
}
.pkg-duration { color: var(--muted); margin-top: .25rem; }
.pkg-price { font-size: 2.25rem; font-weight: 800; margin-top: 1rem; }
.check { color: var(--gold); font-weight: 700; }
.pkg-featured .check { color: #1a130a; }

/* ---------- GALERÍA ---------- */
.gallery-item {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elegant);
  cursor: pointer;
}
.gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform .6s ease;
}
.gallery-item:hover img { transform: scale(1.08); }

/* Lightbox modal */
.btn-close-light {
  background: transparent; border: 1px solid rgba(201,162,39,.5);
  color: var(--gold); width: 44px; height: 44px; border-radius: 999px;
  font-size: 1.1rem; margin-bottom: 1rem;
  transition: background .2s, color .2s;
}
.btn-close-light:hover { background: var(--gold); color: #1a130a; }

/* ---------- TESTIMONIOS ---------- */
.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem;
  box-shadow: var(--shadow-elegant);
  transition: border-color .25s;
}
.testimonial-card:hover { border-color: rgba(201,162,39,.55); }
.testimonial-card .stars { letter-spacing: .15rem; }
.testimonial-card blockquote { color: rgba(247,243,236,.9); font-style: italic; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--grad-gold); color: #1a130a;
  font-family: 'Playfair Display', serif; font-weight: 700;
}

/* ---------- FORMULARIO ---------- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: var(--shadow-elegant);
}
.form-card .form-label { color: var(--text); font-weight: 500; font-size: .9rem; }
.form-card .form-control,
.form-card .form-select {
  background: #2a201a;
  border: 1px solid var(--border);
  color: var(--text);
  padding: .75rem 1rem;
  border-radius: 10px;
}
.form-card .form-control::placeholder { color: rgba(185,172,154,.55); }
.form-card .form-control:focus,
.form-card .form-select:focus {
  background: #2a201a; color: var(--text);
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(201,162,39,.25);
}
.contact-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(201,162,39,.15); color: var(--gold);
}

/* ---------- FOOTER ---------- */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--border); }
.social-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.social-btn:hover { background: var(--gold); color: #1a130a; border-color: var(--gold); }

/* ---------- WHATSAPP FLOTANTE ---------- */
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 1050;
  width: 56px; height: 56px; border-radius: 999px;
  background: #25D366; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 10px 30px rgba(37,211,102,.45);
  text-decoration: none;
  animation: float 3s ease-in-out infinite;
}
.whatsapp-float:hover { color: #fff; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ---------- REVEAL ON SCROLL ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .section { padding: 4rem 0; }
  .display-3 { font-size: 2.5rem; }
  .display-5 { font-size: 1.9rem; }
  .hero { min-height: 92vh; }
  .hero-logo-wrap { width: min(520px, 96vw); margin-top: 1.1rem; }
  .brand-text { font-size: .98rem; }
  .navbar.scrolled,
  .navbar .navbar-collapse.show { background: rgba(22,17,13,.95); }
}


/* ============================================================
   Botón "Ver disponibilidad"
   ============================================================ */
.btn-availability{
  background: linear-gradient(135deg, #006847 0%, #00875a 100%);
  color:#fff;
  border:1px solid rgba(201,162,39,.45);
  font-weight:600;
  letter-spacing:.2px;
  box-shadow: 0 10px 25px -10px rgba(0,104,71,.6);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-availability:hover{
  color:#fff;
  transform: translateY(-1px);
  background: linear-gradient(135deg, #00744f 0%, #00a06a 100%);
  box-shadow: 0 14px 30px -10px rgba(0,104,71,.75);
}

/* ============================================================
   Modal de disponibilidad + FullCalendar
   ============================================================ */
.availability-modal{
  background: #14110f;
  color:#f3efe7;
  border:1px solid rgba(201,162,39,.25);
  border-radius: 1.25rem;
  overflow:hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}
.availability-modal .modal-header{
  padding: 1.25rem 1.5rem .5rem;
}
.availability-modal .modal-body{
  padding: 1rem 1.5rem 1.75rem;
}
.availability-modal .flag-bar{ height: 4px; }

.calendar-legend{
  display:flex; flex-wrap:wrap; gap:1rem;
  font-size:.875rem; color:#cdc6b8;
}
.calendar-legend .dot{
  display:inline-block; width:.65rem; height:.65rem;
  border-radius:50%; margin-right:.4rem; vertical-align:middle;
}
.dot-available { background:#006847; }
.dot-reserved  { background:#D52B1E; }
.dot-tentative { background:#C9A227; }

/* Tema oscuro elegante para FullCalendar */
#availabilityCalendar{
  --fc-border-color: rgba(255,255,255,.08);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: rgba(255,255,255,.03);
  --fc-list-event-hover-bg-color: rgba(201,162,39,.08);
  --fc-today-bg-color: rgba(201,162,39,.10);
  --fc-now-indicator-color: #C9A227;
  --fc-button-bg-color: transparent;
  --fc-button-border-color: rgba(201,162,39,.45);
  --fc-button-text-color: #f3efe7;
  --fc-button-hover-bg-color: rgba(201,162,39,.15);
  --fc-button-hover-border-color: #C9A227;
  --fc-button-active-bg-color: #C9A227;
  --fc-button-active-border-color: #C9A227;
  color:#f3efe7;
  font-family: inherit;
}
#availabilityCalendar .fc-toolbar-title{
  font-family: 'Playfair Display', serif;
  font-weight:700;
  color:#f3efe7;
}
#availabilityCalendar .fc .fc-button{
  text-transform: capitalize;
  border-radius: 999px;
  padding: .35rem .9rem;
  font-weight: 600;
}
#availabilityCalendar .fc .fc-button-primary:not(:disabled).fc-button-active{
  color:#1a1410;
}
#availabilityCalendar .fc-col-header-cell-cushion,
#availabilityCalendar .fc-daygrid-day-number,
#availabilityCalendar .fc-list-day-text,
#availabilityCalendar .fc-list-day-side-text{
  color:#cdc6b8;
  text-decoration:none;
}
#availabilityCalendar .fc-day-today .fc-daygrid-day-number{
  color:#C9A227; font-weight:700;
}
#availabilityCalendar .fc-event{
  border:none;
  padding: 2px 6px;
  font-weight:600;
  font-size:.78rem;
  border-radius:6px;
}
#availabilityCalendar .fc-list-event:hover td{
  background: rgba(201,162,39,.08);
}
#availabilityCalendar .fc-list-empty{
  background: transparent; color:#cdc6b8;
}
@media (max-width: 576px){
  #availabilityCalendar .fc-toolbar.fc-header-toolbar{
    flex-direction: column; gap:.5rem;
  }
}



/* ============================================
   Mariachi Sol de América - Estilos premium
   ============================================ */
:root{
  --bg:#1a1410;
  --bg-2:#221915;
  --surface:#2a201a;
  --text:#f7f1e8;
  --muted:#bdb09f;
  --gold:#C9A227;
  --gold-2:#e9c14b;
  --red:#D52B1E;
  --green:#006847;
  --radius:14px;
  --shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  --shadow-gold: 0 10px 40px -12px rgba(201,162,39,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif; letter-spacing:-.01em}
.text-gold{color:var(--gold)!important}
.text-light-50{color:var(--muted)!important}
.bg-festive{background:linear-gradient(180deg,var(--bg),#15100c)}
.bg-section{background:var(--bg-2)}
.flag-stripe{
  height:4px; width:100%;
  background:linear-gradient(90deg,var(--green),var(--gold),var(--red));
}

/* Navbar */
.navbar-festive{
  background:rgba(20,15,12,.7);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,162,39,.12);
}
.navbar-festive .nav-link{color:#f1e7d4!important; font-weight:500}
.navbar-festive .nav-link:hover{color:var(--gold)!important}
.navbar-festive .navbar-brand{color:#fff!important; font-family:'Playfair Display',serif}

/* Hero */
.hero{
  min-height:92vh;
  position:relative;
  background:
    linear-gradient(180deg,rgba(20,15,12,.75),rgba(20,15,12,.95)),
    radial-gradient(ellipse at top,rgba(201,162,39,.18),transparent 60%),
    #14100c;
  padding-top:80px;
}
.hero h1{ text-shadow:0 4px 24px rgba(0,0,0,.45)}

/* Badges */
.badge-gold{
  display:inline-block; padding:.4rem 1rem;
  border:1px solid rgba(201,162,39,.45);
  border-radius:999px;
  color:var(--gold);
  text-transform:uppercase; letter-spacing:.18em; font-size:.72rem;
  background:rgba(201,162,39,.06);
}

/* Botones */
.btn-gold{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#2a1d05; border:none; font-weight:600;
  box-shadow:var(--shadow-gold);
}
.btn-gold:hover{filter:brightness(1.05); color:#2a1d05}
.btn-outline-gold,.btn-gold-outline{
  background:transparent; color:var(--gold);
  border:1px solid rgba(201,162,39,.55); font-weight:600;
}
.btn-outline-gold:hover,.btn-gold-outline:hover{
  background:rgba(201,162,39,.1); color:var(--gold);
}

/* Service cards */
.service-card{
  background:var(--surface);
  border:1px solid rgba(201,162,39,.12);
  transition:transform .3s ease,border-color .3s ease;
}
.service-card:hover{transform:translateY(-4px); border-color:rgba(201,162,39,.4)}
.service-icon{font-size:2.2rem}

/* Repertorio */
.section-repertorio{ background:linear-gradient(180deg,#15100c,#1c1612)}
.song-card{
  background:linear-gradient(180deg,var(--surface),#241a14);
  border:1px solid rgba(201,162,39,.15);
  border-radius:var(--radius);
  padding:1.25rem;
  display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative; overflow:hidden;
}
.song-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--green),var(--gold),var(--red));
  opacity:.6;
}
.song-card:hover{
  transform:translateY(-4px);
  border-color:rgba(201,162,39,.45);
  box-shadow:var(--shadow-gold);
}
.song-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.song-number{font-family:'Playfair Display',serif; font-size:1.6rem; color:var(--gold); opacity:.7}
.song-icon{color:var(--gold); font-size:1.4rem}
.song-title{font-size:1.15rem; margin:0; font-weight:700}
.song-artist{color:var(--muted); font-size:.88rem; margin:.25rem 0 1rem; flex:1}
.song-actions{display:flex; gap:.5rem; flex-wrap:wrap}
.song-actions .btn{flex:1; min-width:110px}

/* Modal */
.song-modal-content{
  background:linear-gradient(180deg,#1f1813,#15100c);
  color:var(--text);
  border:1px solid rgba(201,162,39,.25);
  border-radius:var(--radius);
}
.song-modal-content .modal-title{color:var(--gold); font-family:'Playfair Display',serif}
#songPlayer iframe, #songPlayer video, #songPlayer audio{
  width:100%; border:0; border-radius:10px;
}
#songPlayer iframe{aspect-ratio:16/9}

/* Paquetes */
.package-card{
  background:var(--surface);
  border:1px solid rgba(201,162,39,.15);
  position:relative;
  transition:transform .3s ease;
}
.package-card:hover{transform:translateY(-4px)}
.package-featured{
  border-color:var(--gold);
  box-shadow:var(--shadow-gold);
}
.package-tag{
  position:absolute; top:-12px; right:20px;
  background:var(--gold); color:#2a1d05; font-weight:700;
  padding:.25rem .75rem; border-radius:999px; font-size:.72rem; text-transform:uppercase;
}
.price{font-family:'Playfair Display',serif; font-size:2rem; color:var(--gold); margin-top:.5rem}

/* Form */
.reserva-form{
  background:var(--surface);
  border:1px solid rgba(201,162,39,.15);
  box-shadow:var(--shadow);
}
.reserva-form .form-control,
.reserva-form .form-select{
  background:#15100c; color:var(--text);
  border:1px solid rgba(201,162,39,.18);
}
.reserva-form .form-control:focus,
.reserva-form .form-select:focus{
  border-color:var(--gold); box-shadow:0 0 0 .2rem rgba(201,162,39,.2);
  background:#15100c; color:var(--text);
}
.reserva-form .form-label{font-weight:500; color:#e8dcc4}

/* WhatsApp */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:999;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; font-size:1.7rem;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:transform .3s ease;
}
.whatsapp-float:hover{transform:scale(1.08); color:#fff}

/* Footer */
.footer{background:#100c09; border-top:1px solid rgba(201,162,39,.12)}

/* Reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1; transform:translateY(0)}

/* ===== usuario_pago.php ===== */
.event-card{
  background:linear-gradient(180deg,var(--surface),#1d1510);
  border:1px solid rgba(201,162,39,.2);
  box-shadow:var(--shadow);
}
.event-field{padding:.25rem .25rem}
.event-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.15em; color:var(--gold); margin-bottom:.25rem}
.event-value{font-size:1.05rem; color:#f7f1e8; font-weight:500}

.song-table{background:transparent}
.song-table thead th{
  color:var(--gold); text-transform:uppercase; letter-spacing:.1em; font-size:.75rem;
  border-bottom:1px solid rgba(201,162,39,.25);
}
.song-table tbody tr{background:transparent}
.song-table .form-check-input:checked{
  background-color:var(--gold); border-color:var(--gold);
}