/* ==========================================================================
   Banners con imagen — la identidad del sitio. Se conservan la imagen, el
   degradado y el título en Cinzel; solo se redondean y se les da relieve.
   ========================================================================== */

html[data-theme] :is(.main-content > .page-hero:first-child, .home-hero, .map-hero, .progress-hero) {
  /* Contenedor de su ::before (textura diagonal); sin esto la textura cubría toda la página */
  position: relative !important;
  isolation: isolate;
  border-radius: var(--r-card) !important;
  border: 1px solid var(--c-line-strong) !important;
  box-shadow: var(--c-shadow) !important;
}

html[data-theme] .main-content > .page-hero:first-child h1 { letter-spacing: .05em !important; }

/* Móvil: el título no se sale del banner y el texto no se monta sobre la ilustración */
@media (max-width: 700px) {
  html[data-theme] .main-content > .page-hero:first-child h1 {
    font-size: 1.05rem !important;
    overflow-wrap: anywhere;
  }
  html[data-theme] .main-content > .page-hero:first-child .hero-copy {
    max-width: 72% !important;
    padding: 1.2rem 1.1rem !important;
  }
  html[data-theme] .main-content > .page-hero:first-child p { font-size: .82rem !important; }
}