/* ========================================================================== 
   HEADER / HERO PROFESIONAL (Full-Width + Zona Segura)
   ========================================================================== */
.tenant-hero {
  position: relative;
  width: 100%;
  min-height: 220px;
  background-color: var(--color-bg, #0b0f1a);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

/* Oscurecemos el fondo si hay imagen para que el texto resalte */
/* Oscurecemos el fondo SOLO un poco para que el texto blanco se lea, 
   pero dejando que la imagen del banner se vea clara y nítida */
.tenant-hero-overlay {
  position: absolute;
  inset: 0;
  /* Cambiamos el gradiente al 95% por un tono oscuro muy suave (25%) */
  background: rgba(0, 0, 0, 0.25) !important; 
  z-index: 1;
}

/* La Zona Segura (Contenedor del Logo + Texto) */
.tenant-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

/* El Logo de la tienda */
.tenant-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%; /* Cambia a 16px si lo prefieres cuadrado redondeado */
  object-fit: contain;
  background: var(--surface-panel, #fff); 
  border: 2px solid var(--color-accent);
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  padding: 4px;
}

/* Contenedor de Textos */
.tenant-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Nombre de la tienda (Configurable por el Admin) */
/* Nombre de la tienda (Configurable por el Admin) */
.tenant-title {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-title, 'Manifest', system-ui);
  font-size: clamp(1.5rem, 6vw, 2.5rem); 
  font-weight: 900;
  letter-spacing: 0.5px;
  
  /* LA MAGIA: Sombra Premium Multicapa (Corta, Media y Larga) */
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.8),   /* Capa 1: Define el contorno sutilmente */
    0 4px 12px rgba(0, 0, 0, 0.6),  /* Capa 2: Separa el texto del fondo */
    0 10px 24px rgba(0, 0, 0, 0.5); /* Capa 3: Crea profundidad y contraste amplio */
}

/* Eslogan / Subtítulo */
.tenant-slogan {
  margin: 0;
  color: #ffffff; /* Lo pasamos a blanco sólido para máxima lectura */
  font-family: var(--font-slogan, var(--font-body, system-ui));
  font-size: clamp(0.9rem, 3.5vw, 1.1rem);
  font-weight: 600; /* Un poco más de grosor para que no se pierda */
  
  /* Sombra Multicapa adaptada para texto más pequeño */
  text-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.9), 
    0 3px 8px rgba(0, 0, 0, 0.6),
    0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Línea extra mucho más pequeña (Tagline / Info extra) */
.tenant-microtext {
  margin: 0.25rem 0 0 0;
  color: #ffffff !important; /* BLANCO PURO BLINDADO */
  font-family: var(--font-body, system-ui);
  font-size: clamp(0.7rem, 1.5vw, 0.85rem); /* Un toquecito más grande */
  font-weight: 700 !important; /* Aumentamos el grosor para mejorar lectura */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  /* Sombra Multicapa Premium adaptada a letra pequeña */
  text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.95), 
    0 2px 6px rgba(0, 0, 0, 0.8),
    0 4px 12px rgba(0, 0, 0, 0.7) !important;
}

/* Adaptación a Tablet / PC */
@media (min-width: 768px) {
  .tenant-hero {
    min-height: 280px; 
  }
  
  .tenant-hero-content {
    flex-direction: row; 
    text-align: left;
    padding: 3rem 2rem;
    gap: 1.5rem;
  }
  
  .tenant-logo {
    width: 110px;
    height: 110px;
  }
}