/* ================================================================
   Page Hero — Cabecera estándar de páginas interiores
   Colegio Docksta · Componente reutilizable
   ================================================================ */

.page-hero {
  padding     : 56px 0 48px;
  text-align  : center;
  position    : relative;
  overflow    : hidden;
}

/* Decoraciones circulares de fondo */
.page-hero::before {
  content       : '';
  position      : absolute;
  top: -80px; right: -80px;
  width: 300px; height: 300px;
  border-radius : 50%;
  background    : rgba(201,162,39,.07);
  pointer-events: none;
}
.page-hero::after {
  content       : '';
  position      : absolute;
  bottom: -50px; left: -50px;
  width: 220px; height: 220px;
  border-radius : 50%;
  background    : rgba(30,132,73,.13);
  pointer-events: none;
}

/* ── Variante default: azul marino → verde institucional ────── */
.page-hero--default {
  background: linear-gradient(135deg,
    #1a2744  0%,
    #243a6e 50%,
    #1a5f30 100%
  );
}

/* ── Variante CCAA: verde dominante + toque azul ─────────────── */
.page-hero--ccaa {
  background: linear-gradient(135deg,
    #1e7a3a  0%,
    #155228 38%,
    #1a2744 72%,
    #1e3a6e 100%
  );
}


/* ── Título principal ─────────────────────────────────────────── */
.page-hero__titulo {
  font-family : var(--font-display,'Playfair Display',serif);
  font-size   : clamp(1.9rem, 4.5vw, 2.85rem);
  font-weight : 700;
  color       : #ffffff;
  line-height : 1.2;
  margin      : 0 0 14px;
  position    : relative;
  z-index     : 1;
}

/* Palabras destacadas dentro del título */
.hero-gold  { color: var(--gold-light,#e8bc3a); }
.hero-green { color: #7af0a4; }
.hero-white { color: #ffffff; }

/* ── Subtítulo / bajada ───────────────────────────────────────── */
.page-hero__subtitulo {
  font-family: var(--font-ui,'DM Sans',sans-serif);
  font-size  : 15px;
  color      : rgba(255,255,255,.78);
  max-width  : 630px;
  margin     : 0 auto;
  line-height: 1.75;
  position   : relative;
  z-index    : 1;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-hero               { padding: 44px 0 36px; }
  .page-hero__subtitulo    { font-size: 14px; }
}