/* ============================================================================
   pages/vida-escolar/arte-musica.css
   ----------------------------------------------------------------------------
   Firma visual: grid asimétrico (mosaic) de disciplinas artísticas, con tiles
   de distintos tamaños (lg/wide/tall/std) que rompen la grilla regular.
   ============================================================================ */

.cec-mosaic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .cec-mosaic-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
  }
}
@media (min-width: 992px) {
  .cec-mosaic-grid { grid-auto-rows: 220px; }
}

.cec-mosaic-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--cec-radius);
  padding: 1.5rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(160deg, var(--bs-primary) 0%, #1a2e8a 100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  box-shadow: var(--cec-shadow-sm);
  min-height: 200px;
}
.cec-mosaic-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(var(--bs-primary-rgb), 0.30);
}

/* Variantes de color (todas dentro de la paleta brand) */
.cec-mosaic-tile--secondary { background: linear-gradient(160deg, var(--bs-secondary) 0%, var(--bs-primary) 100%); }
.cec-mosaic-tile--tertiary  { background: linear-gradient(160deg, var(--bs-tertiary) 0%, var(--bs-secondary) 100%); }
.cec-mosaic-tile--inverted  {
  background: #fff;
  border: var(--cec-border);
  color: var(--bs-primary);
}
.cec-mosaic-tile--inverted .cec-mosaic-text { color: var(--bs-secondary); }
.cec-mosaic-tile--inverted .cec-mosaic-symbol { color: rgba(var(--bs-primary-rgb), 0.12); }

/* Símbolo decorativo (ícono grande detrás del texto) */
.cec-mosaic-symbol {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 6rem;
  opacity: 0.18;
  color: #fff;
  pointer-events: none;
  line-height: 1;
}

.cec-mosaic-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.8;
  margin: 0 0 0.4rem;
}
.cec-mosaic-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  line-height: 1.15;
}
.cec-mosaic-tile--lg .cec-mosaic-title,
.cec-mosaic-tile--wide .cec-mosaic-title { font-size: 1.5rem; }
.cec-mosaic-text {
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
  opacity: 0.92;
}

/* Variantes de tamaño */
@media (min-width: 768px) {
  .cec-mosaic-tile--lg   { grid-column: span 2; grid-row: span 2; }
  .cec-mosaic-tile--wide { grid-column: span 2; }
  .cec-mosaic-tile--tall { grid-row: span 2; }
}

/* Bloque de festival destacado */
.cec-festival-card {
  background: linear-gradient(160deg, #050d52 0%, #04136d 50%, var(--bs-secondary) 100%);
  color: #fff;
  border-radius: var(--cec-radius-lg);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}
.cec-festival-card::after {
  content: '\f001';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: -30px;
  bottom: -30px;
  font-size: 14rem;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  line-height: 1;
}
.cec-festival-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.6rem;
}
.cec-festival-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 0.85rem;
  line-height: 1.15;
}
.cec-festival-lead {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 1.25rem;
}
.cec-festival-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cec-festival-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.cec-festival-stat-num {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
}
.cec-festival-stat-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}