/* ===== KROWN - FORZAR VISIBILIDAD HEADER (pegar en las 3 cajas) ===== */
/* Variables (si quieres otro dorado, me dices) */
:root{
  --krown-gold: #C9A84B;
  --krown-ivory: #F7F5F2;
  --krown-text: #111217;
  --krown-overlay-strong: rgba(8,8,8,0.62); /* más oscuro para asegurar contraste */
}

/* 1) Overlay más oscuro (mejora contraste del texto sobre la foto) */
.sb-hero::before,
.sb-hero-banner::before,
#widget_container .sb-hero::before,
.sb-page-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--krown-overlay-strong) !important;
  z-index: 2 !important;
}

/* 2) Forzar que el contenido del hero esté por encima del overlay y sea legible */
.sb-hero .hero-content,
.sb-hero-banner .hero-content,
#widget_container .hero-content,
.sb-page-hero .hero-content {
  position: relative !important;
  z-index: 3 !important;
  color: var(--krown-ivory) !important; /* texto claro */
  text-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
}

/* 3) Forzar color y tamaño del título del header */
#widget_container h1.title,
#widget_container h1.title a,
.sb-hero .title, .sb-hero .hero-title, .sb-page-hero h1,
.sb-hero-banner .title, .sb-hero .hero-content h1 {
  color: var(--krown-ivory) !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  letter-spacing: 0.6px !important;
  text-transform: none !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.65) !important;
  z-index: 4 !important;
}

/* 4) Si el nombre está en enlace, asegurar visibilidad */
#widget_container h1.title a { color: var(--krown-ivory) !important; text-decoration:none !important; }

/* 5) Botones centrales - ligeramente más suaves (en caso de choque visual) */
#widget_container .sb-button, .sb-hero .sb-button, .sb-hero .submit-button {
  background: linear-gradient(180deg,var(--krown-gold), #B78F39) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  z-index: 5 !important;
}

/* 6) Menú / hamburguesa - fondo sutil para que no desaparezca */
.sb-topbar, .sb-header, #widget_container .sb-hamburger, .sb-menu-toggle {
  background: rgba(0,0,0,0.22) !important;
  color: var(--krown-ivory) !important;
  z-index: 6 !important;
}

/* 7) Seguridad: si plataforma usa reglas inline, forzamos con !important extra (último recurso) */
#widget_container .sb-hero .hero-content h1 { color: var(--krown-ivory) !important; }