/* CTA y contador del footer (tema turquesa) */
.cta-btn-footer{
  display:inline-block;
  background: var(--accent);
  color: var(--accent-contrast) !important;
  border-radius: .5rem;
  padding: .6rem 1rem;
  font-weight: 700;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform .15s ease, filter .15s ease;
  white-space: normal;       /* permite que el texto largo haga wrap */
}
.cta-btn-footer:hover{ transform: scale(1.02); filter: brightness(1.05); }

.visits-btn-footer{
  background: #fff;
  color: var(--text);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .5rem;
  padding: .45rem .9rem;
  display: inline-flex;
  align-items: center;
  box-shadow: var(--shadow);
}

/* Ajustes de tipograf铆a en texto del footer */
.footer-gradient .col-text p{ margin: 0 0 .3rem; }

/* Responsive: apilar y que el bot贸n ocupe el ancho si hace falta */
@media (max-width: 767px){
  .cta-btn-footer{ width: 100%; }
}

/* Utilidades visuales usadas por app.js */
.text-accent{ color: var(--accent) !important; }
.badge-amber{
  display:inline-block;
  background:#fff3cd; color:#92400e;
  font-size:.75rem; padding:.25rem .5rem; border-radius:9999px;
}
.site-card{
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* ====== FOOTER SIEMPRE VISIBLE Y POR ENCIMA ====== */
html, body { height: 100%; min-height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

main { flex: 1 0 auto; }

/* El footer queda al final y no lo tapa nada */
footer.footer-gradient{
  position: relative;       /* crea stacking context propio */
  z-index: 20;              /* por encima de secciones previas */
  margin-top: clamp(16px,2vw,28px);
  width: 100%;
  flex-shrink: 0;
  border-radius: 0 !important;
  background: rgba(255,255,255,.60);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.06);
}

/* Si alguna sección tenía z-index alto, la bajamos */
.gallery-section, .gallery-shell, .reviews-wrapper, .video-hero {
  position: relative;
  z-index: 1;
}

/* Ajuste por si la sección anterior dejaba el footer 'pegado' */
.gallery-section,
.gallery-shell,
.reviews-wrapper { margin-bottom: clamp(16px,2vw,36px); }

/* ===== Sticky-footer & anti-overflow patch ===== */

html, body{ min-height:100%; height:auto !important; overflow-x:hidden; }
body{ display:flex; flex-direction:column; }

/* el contenido debe ocupar el espacio flexible */
main{ flex:1 0 auto; min-height:0; }

/* footer estable, sin recortes ni solapes */
footer.footer-gradient{
  position:relative;
  z-index:0;
  flex-shrink:0;
  padding-top:.75rem;
  padding-bottom:.75rem;
  box-sizing:border-box;
}

/* evita scroll interno accidental en wrappers */
#content, .wrap, .texture-bg{ overflow:visible !important; }

/* por si algún margen colapsa al final */
.footer-gradient .footer-container{ margin-bottom:0 !important; }

/* === CTA brillante "¡Participa Ahora!" === */
.btn-cta{
  --bg1:#ffe27a;               /* dorado claro */
  --bg2:#f7c700;               /* dorado intenso */
  --txt:#111;                  /* texto negro para contraste */
  --ring:#2196F3;              /* azul del tema para foco */

  display:inline-block;
  padding:.95rem 1.75rem;
  border-radius:9999px;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--txt);
  font-weight:800;
  letter-spacing:.3px;
  text-align:center;
  text-decoration:none;
  box-shadow:
    0 8px 24px rgba(247,199,0,.45),
    0 2px 0 rgba(0,0,0,.10),
    0 0 18px rgba(250,204,21,.55);
  position:relative;
  isolation:isolate;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* brillo suave alrededor */
.btn-cta::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:inherit;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(120% 60% at 50% 120%, rgba(255,193,7,.6), transparent 65%);
  filter:blur(10px);
  opacity:.75;
  z-index:-1;
}

/* hover / active / focus */
.btn-cta:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    0 12px 28px rgba(247,199,0,.55),
    0 3px 0 rgba(0,0,0,.12),
    0 0 26px rgba(250,204,21,.85);
}
.btn-cta:active{ transform:translateY(0) scale(.98); }
.btn-cta:focus-visible{
  outline:3px solid var(--ring);
  outline-offset:3px;
}

/* animación de respiración (no molesta y respeta reduce-motion) */
@media (prefers-reduced-motion: no-preference){
  @keyframes breathe{
    0%,100%{ filter: drop-shadow(0 0 0 rgba(250,204,21,.55)); }
    50%{ filter: drop-shadow(0 0 10px rgba(250,204,21,.9)); }
  }
  .btn-cta{ animation:breathe 2.2s ease-in-out infinite; }
}

/* responsive: ocupa todo el ancho en móvil si hace falta */
@media (max-width: 480px){
  .btn-cta{ width:100%; }
}