:root{
  --verde-1:#1f4022; 
  --verde-2:#2c5a36; 
  --verde-3:#4a7b73;
  --txt:#fdfcf8;
}

/* Hero/Topbar */
.hero-bar{
  background: linear-gradient(135deg, var(--verde-2), var(--verde-3));
  border-bottom: 1px solid rgba(255,255,255,.15);
  color: var(--txt);
}

/* Bot贸n Volver */
.btn-back{
  background:#ffffff; 
  color:#1b4332; 
  border:none; 
  border-radius:999px;
  font-weight:600; 
  padding:8px 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
  transition: filter .15s ease, transform .15s ease;
}
.btn-back:hover{ filter: brightness(.95); transform: translateY(-1px); }

/* Chip de marca centrado */
.brand-badge{
  display:inline-flex; 
  align-items:center; 
  gap:.5rem;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; 
  padding:6px 12px; 
  border-radius:999px; 
  font-weight:700;
  letter-spacing:.3px;
  backdrop-filter: blur(2px);
}

/* Layout base */
.hero-bar {
  background: linear-gradient(135deg, var(--verde-2), var(--verde-3));
  border-bottom: 1px solid rgba(255,255,255,.15);
  color: var(--txt);
}
.container.d-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; /* necesario para centrar absoluto en móvil */
}
.col-left, .col-right { flex: 1; display:flex; align-items:center; }
.col-left { justify-content: flex-start; }
.col-center { flex: 2; display:flex; justify-content: center; }
.col-right { justify-content: flex-end; }

/* Botón volver */
.btn-back {
  background:#fff; color:#1b4332; border:none; border-radius:999px;
  font-weight:600; padding:8px 14px; box-shadow:0 6px 14px rgba(0,0,0,.10);
  transition: filter .15s, transform .15s;
}
.btn-back:hover { filter: brightness(.95); transform: translateY(-1px); }

/* Brand */
.brand-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; padding:6px 12px; border-radius:999px; font-weight:700;
  letter-spacing:.3px; backdrop-filter: blur(2px);
}

/* ✅ Fix para móviles: evita que se junten y fuerza el centrado real */
@media (max-width: 576px){
  .hero-bar { padding: 6px 8px; }
  .container.d-flex { min-height: 48px; }

  /* Centro absoluto para que SIEMPRE quede centrado */
  .col-center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: 0 0 auto;
    z-index: 1; /* por si acaso */
  }
  .brand-badge{
    padding: 4px 10px;
    gap: 6px;
    font-size: .95rem;
  }

  /* Botón solo-ícono en XS para ganar espacio */
  .btn-back { padding: 8px 10px; }
  .btn-back .txt { display: none; }      /* oculta texto "Volver" */
  .btn-back i { margin-right: 0 !important; }

  /* Columnas laterales no compiten con el centro */
  .col-left, .col-right { flex: 0 0 auto; }
}

/* Opcional: si usas notch/ios */
@supports (padding: max(0px)) {
  @media (max-width: 576px){
    .hero-bar { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  }
}