/* ============================================================
   F1 — FUNDAMENTOS (pack gloria24 · 19/06/2026)
   Aditivo: se carga DESPUÉS de style.min.css + enhance.css.
   Reversible: quitar el <link> en includes/header.php restaura todo.
   Cubre: prefers-reduced-motion (hoy 0 en front) · fix del bug
   del scroll-reveal ("espacios en blanco") · :focus-visible global ·
   estados de botón transversales · tokens AA para packs siguientes.
   NO migra grises/oros hardcodeados ni reescribe colores de botón
   (eso es cirugía del minificado → pack aparte con backup regenerado).
   ============================================================ */

/* ---- Tokens nuevos (disponibles; migración masiva = pack siguiente) ---- */
:root {
  --gold-on-dark: #E0BE55;   /* oro-texto sobre navy ~5.2:1 ✓AA  (NO usar #c9a227 como texto) */
  --gold-on-light: #9A7A1E;  /* oro-texto sobre claro ~4.8:1 ✓AA */
  --ink-600: #44525F;        /* texto secundario AA (reemplazo futuro de #888/#999) */
  --ink-400: #6B7785;        /* texto terciario, mínimo AA */
  --surface-warm: #F7F5F0;   /* "papel" cálido (futuro fondo patrimonio) */
  --focus-ring: var(--gold, #c9a227);
  /* Pack botones unificados (grok 2026-06-27) */
  --btn-radius: 12px;
  --btn-min-h: 44px;
  --btn-gradient-primary: linear-gradient(135deg, var(--yellow, #e8c547), var(--gold, #c9a227));
  --btn-shadow-primary: 0 4px 14px rgba(201, 162, 39, 0.28);
  --btn-shadow-primary-hover: 0 10px 28px rgba(201, 162, 39, 0.38);
}

/* ============================================================
   1) FIX del scroll-reveal — VISIBLE POR DEFECTO
   El min define .reveal{opacity:0} y el JS añade .revealed.
   Si el IntersectionObserver no dispara (o sin JS) → quedaba
   invisible = "espacios en blanco". Ahora: visible por defecto;
   la animación de entrada SOLO si el usuario acepta movimiento.
   ============================================================ */
.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Con movimiento permitido: los aún-no-revelados arrancan ocultos
     y el JS (.revealed) los anima. La especificidad de :not() gana. */
  .reveal:not(.revealed) {
    opacity: 0;
    transform: translateY(40px);
  }
}

/* ============================================================
   2) GUARD GLOBAL prefers-reduced-motion (hoy ausente en front)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  /* Iconos Font Awesome animados → quietos */
  .fa-beat, .fa-bounce, .fa-fade, .fa-beat-fade, .fa-flip,
  .fa-shake, .fa-spin, .fa-spin-pulse { animation: none !important; }
}

/* ============================================================
   3) :focus-visible GLOBAL (accesibilidad por teclado)
   Anillo dorado coherente; no afecta al ratón (solo teclado).
   ============================================================ */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  /* outline transparente = sigue visible en modo alto contraste (HCM);
     doble anillo (blanco + navy) = se ve sobre fondo claro Y oscuro Y dorado, ≥3:1. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--blue, #1e3a5f);
}
/* [rev-fresca H4] Refuerzo de especificidad: campos con outline:none hardcodeado
   de mayor especificidad (.form-group input:focus 0,2,1 · nav search). */
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible,
.nav-search-form input:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--blue, #1e3a5f);
}

/* ============================================================
   4) ESTADOS DE BOTÓN transversales (sin tocar colores)
   Unifica feedback de :hover / :active / :disabled / loading
   en todos los .btn, que hoy son 6+ sistemas inconsistentes.
   ============================================================ */
.btn {
  /* [rev-fresca H9] incluye color/background/border para no perder las
     transiciones suaves de color de los botones base. */
  min-height: var(--btn-min-h);
  border-radius: var(--btn-radius);
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease,
              color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn-primary {
  background: var(--btn-gradient-primary);
  color: var(--blue-dark, #0a1628);
  box-shadow: var(--btn-shadow-primary);
}
.btn-primary:hover {
  box-shadow: var(--btn-shadow-primary-hover);
}
.btn-primary i.fa-arrow-right,
.btn-wizard.btn-next i.fa-arrow-right,
.btn-wizard.btn-submit-wizard i.fa-paper-plane {
  transition: transform 0.2s ease;
}
.btn-primary:hover i.fa-arrow-right,
.btn-wizard.btn-next:hover i.fa-arrow-right,
.btn-wizard.btn-submit-wizard:hover i.fa-paper-plane {
  transform: translateX(4px);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1em; height: 1em;
  top: 50%; left: 50%;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: f1-btn-spin 0.6s linear infinite;
}
@keyframes f1-btn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  .btn.is-loading::after { animation: none !important; }
}

/* ============================================================
   5) BOTÓ FLOTANT WHATSAPP — completa .whatsapp-widget (el CSS de
   posición ya existía en style.min.css sin markup; markup añadido a
   footer.php). El nº lo inyecta .xtel-wa (scripts.php) desde la BD.
   ============================================================ */
.whatsapp-widget {
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; line-height: 1; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-widget:hover { transform: scale(1.08); color: #fff; box-shadow: 0 8px 26px rgba(0,0,0,0.3); }
/* logo oficial WhatsApp: el verde de marca está exento de WCAG 1.4.11; text-shadow mejora la legibilidad del icono igualmente */
.whatsapp-widget i { text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
/* back-to-top encima del WhatsApp: ambos van abajo-derecha y se solapaban */
.back-to-top { bottom: 90px !important; }

@media (max-width: 480px) {
  .whatsapp-widget { width: 50px; height: 50px; font-size: 1.5rem; bottom: 18px; right: 18px; }
  .back-to-top { bottom: 80px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-widget:hover { transform: none; }
}

/* ============================================================
   6) BOTÓ "REBUTJAR" del banner de cookies (RGPD/AEPD: al mateix nivell
   que "Acceptar"). Estil ghost visible, hereta el color del banner.
   ============================================================ */
.cookie-popup-reject {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  font: inherit; font-weight: 600;
  cursor: pointer; opacity: 0.85;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.cookie-popup-reject:hover { transform: translateY(-2px); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cookie-popup-reject:hover { transform: none; } }
/* que els 3 elements (Acceptar/Rebutjar/Més info) no es desborden en mòbil estret */
.cookie-popup-actions { flex-wrap: wrap; }

/* A2 (paula24 2026-06-20): CTA "Reserva" prominent al navbar — conversió nº1 ajuntaments */
/* grok 2026-06-27: gradiente = hero .btn-primary, radio 12px, sombra en reposo */
.nav-cta-reserva {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: var(--btn-min-h);
  padding: 0.5rem 1.1rem;
  border-radius: var(--btn-radius);
  background: var(--btn-gradient-primary);
  color: var(--blue-dark, #0a1628);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--btn-shadow-primary);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.nav-cta-reserva:hover,
.nav-cta-reserva:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-primary-hover);
  filter: brightness(1.04);
  color: var(--blue-dark, #0a1628);
  outline: none;
}
.nav-cta-reserva:focus-visible {
  box-shadow: var(--btn-shadow-primary-hover), 0 0 0 3px rgba(201, 162, 39, 0.45);
}
.nav-cta-reserva.active {
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.5), var(--btn-shadow-primary);
}
@media (max-width: 600px) {
  .nav-cta-reserva { padding: 0.45rem 0.75rem; min-height: 40px; }
  .nav-cta-reserva span { display: none; }
}

/* ============================================================
   7) WIZARD RESERVA — botones alineados a paleta oro/navy (grok 2026-06-27)
   ============================================================ */
.btn-wizard {
  min-height: var(--btn-min-h);
  padding: 0.75rem 1.75rem;
  border-radius: var(--btn-radius);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-wizard.btn-prev {
  background: var(--surface-warm, #f7f5f0);
  color: var(--ink-600, #44525f);
  border: 1.5px solid #e5e7eb;
}
.btn-wizard.btn-prev:hover {
  background: #efe9df;
  border-color: #d4cfc4;
  transform: translateY(-1px);
}
.btn-wizard.btn-next,
.btn-wizard.btn-submit-wizard,
a.btn-wizard.btn-next {
  background: var(--btn-gradient-primary);
  color: var(--blue-dark, #0a1628);
  box-shadow: var(--btn-shadow-primary);
}
.btn-wizard.btn-next:hover,
.btn-wizard.btn-submit-wizard:hover,
a.btn-wizard.btn-next:hover {
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-primary-hover);
}
.btn-wizard:disabled,
.btn-wizard.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
  box-shadow: none;
}

/* Selección wizard: borde dorado (cards = botones implícitos) */
.event-type input:checked + label,
.pack-option input:checked + label {
  border-color: var(--gold, #c9a227) !important;
  background: rgba(201, 162, 39, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.22) !important;
  transform: scale(1.02);
}
.event-type label,
.pack-option label {
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.wizard-container .success-message i.fa-check-circle {
  color: var(--gold, #c9a227);
}
@media (prefers-reduced-motion: reduce) {
  .event-type input:checked + label,
  .pack-option input:checked + label { transform: none; }
  .btn-wizard.btn-next:hover,
  .btn-wizard.btn-submit-wizard:hover,
  a.btn-wizard.btn-next:hover { transform: none; }
}

/* ============================================================
   8) STICKY CTA MÒBIL — barra B2B després 40% scroll (grok 2026-06-27)
   ============================================================ */
.sticky-cta-mobile {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -4px 24px rgba(10, 22, 40, 0.12);
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sticky-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--btn-min-h);
  padding: 0.75rem 1.25rem;
  border-radius: var(--btn-radius);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sticky-cta-primary {
  flex: 1;
  background: var(--btn-gradient-primary);
  color: var(--blue-dark, #0a1628);
  box-shadow: var(--btn-shadow-primary);
}
.sticky-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-shadow-primary-hover);
  color: var(--blue-dark, #0a1628);
}
.sticky-cta-wa {
  flex: 0 0 auto;
  width: var(--btn-min-h);
  height: var(--btn-min-h);
  padding: 0;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}
.sticky-cta-wa:hover {
  transform: scale(1.05);
  color: #fff;
}
@media (max-width: 768px) {
  .sticky-cta-mobile.is-visible {
    display: flex;
    transform: translateY(0);
  }
}
html[data-theme="dark"] .sticky-cta-mobile {
  background: rgba(13, 27, 42, 0.96);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta-mobile { transition: none; }
  .sticky-cta-primary:hover,
  .sticky-cta-wa:hover { transform: none; }
}