/* =====================================================
   VARIABLES + CARD
===================================================== */
.br-card {
  --br-bg: #ffffff;
  --br-text: #0f172a;
  --br-muted: #475569;
  --br-border: rgba(15, 23, 42, 0.10);
  --br-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --br-shadow-hover: 0 18px 50px rgba(15, 23, 42, 0.14);
  --br-radius: 18px;
  --br-primary: #0b2239;
  --br-primary-hover: #0f2f4f;

  background: var(--br-bg);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  box-shadow: var(--br-shadow);
  padding: 16px;
  max-width: 720px;
}

.br-card:hover {
  box-shadow: var(--br-shadow-hover);
}

/* =====================================================
   CONTENT
===================================================== */
.br-content { display: grid; gap: 10px; }
.br-head { display: grid; gap: 6px; }

.br-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--br-text);
}

.br-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.br-meta-link {
  color: var(--br-muted);
  font-size: 14px;
  text-decoration: none;
}

/* =====================================================
   BOTONERA (GRID)
===================================================== */
.br-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}

/* =====================================================
   BOTONES BASE
===================================================== */
.br-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;

  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.15);

  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;

  text-decoration: none !important;
  user-select: none;

  transition: all .2s ease;
}

/* =====================================================
   BOTÓN RESERVAS (PRIMARY)
===================================================== */
.br-btn-primary {
  background: var(--br-primary);
  color: #ffffff !important;
  border-color: transparent;
}

/* =====================================================
   BOTONES GHOST
===================================================== */
.br-btn-ghost {
  background: #ffffff;
  color: var(--br-text);
}

/* Hover ghost → azul */
.br-btn-ghost:hover {
  background: var(--br-primary);
  color: #ffffff !important;
  border-color: var(--br-primary);
}

/* =====================================================
   EFECTO SONAR (SOLO RESERVAS)
===================================================== */
@keyframes br-sonar {
  0% {
    box-shadow:
      0 12px 24px rgba(11,34,57,.18),
      0 0 0 0 rgba(37,99,235,.35);
  }
  60% {
    box-shadow:
      0 18px 36px rgba(11,34,57,.24),
      0 0 0 18px rgba(37,99,235,0);
  }
  100% {
    box-shadow:
      0 12px 24px rgba(11,34,57,.18),
      0 0 0 0 rgba(37,99,235,0);
  }
}

.br-btn-primary {
  animation: br-sonar 2.4s ease-out infinite;
}

.br-btn-primary:hover,
.br-btn-primary:focus-visible {
  animation-play-state: paused;
}

/* =====================================================
   MOBILE LAYOUT (CLAVE)
===================================================== */
@media (max-width: 520px) {

  /* Reservas siempre ancho completo */
  .br-actions .br-btn-primary {
    grid-column: 1 / -1;
  }

  /* Si SOLO hay 2 botones → el segundo también full */
  .br-actions .br-btn:nth-child(2):last-child {
    grid-column: 1 / -1;
  }
}

/* =====================================================
   RRSS
===================================================== */
.br-social {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.br-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================
   ACCESIBILIDAD
===================================================== */
@media (prefers-reduced-motion: reduce) {
  .br-btn-primary {
    animation: none !important;
  }
}