/* ===== index.css — estilos de portada extraídos del <style> inline de index.html ===== */

.hero-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hero-split { grid-template-columns: 1.05fr 1fr; } }

/* Cuadrícula de fotos del hero */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 6px;
  min-height: 480px;
}
.photo-grid .photo-slot:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 4; }
.photo-grid .photo-slot:nth-child(2) { grid-column: 5 / 7; grid-row: 1 / 3; }
.photo-grid .photo-slot:nth-child(3) { grid-column: 5 / 7; grid-row: 3 / 5; }
.photo-grid .photo-slot:nth-child(4) { grid-column: 1 / 3; grid-row: 4 / 7; }
.photo-grid .photo-slot:nth-child(5) { grid-column: 3 / 7; grid-row: 5 / 7; }

.feature-card { background: #fff; border: 1px solid rgb(181 135 64 / 30%); display: flex; flex-direction: column; position: relative; }
.feature-card .photo-slot { aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid rgb(181 135 64 / 30%); }
.feature-card-body { padding: 1.5rem 1.5rem 1.75rem; flex: 1; display: flex; flex-direction: column; }

.stat-block { text-align: center; padding: 1.5rem 0.5rem; }
.stat-block + .stat-block { border-left: 1px solid rgb(181 135 64 / 35%); }
@media (max-width: 767px) {
  .stat-block + .stat-block { border-left: 0; border-top: 1px solid rgb(181 135 64 / 35%); }
}

/* Pentagrama dorado decorativo del hero */
.hero-staff {
  height: 24px;
  margin: 3.5rem 0;
  max-width: 14rem;
  opacity: 0.9;
  background-image:
    linear-gradient(to bottom,
      transparent 0, transparent 3px,
      rgb(181 135 64 / 0.5) 3px, rgb(181 135 64 / 0.5) 4px,
      transparent 4px, transparent 8px,
      rgb(181 135 64 / 0.5) 8px, rgb(181 135 64 / 0.5) 9px,
      transparent 9px, transparent 13px,
      rgb(181 135 64 / 0.5) 13px, rgb(181 135 64 / 0.5) 14px,
      transparent 14px, transparent 18px,
      rgb(181 135 64 / 0.5) 18px, rgb(181 135 64 / 0.5) 19px,
      transparent 19px, transparent 23px,
      rgb(181 135 64 / 0.5) 23px, rgb(181 135 64 / 0.5) 24px);
}
/* Variante decorativa para otras secciones (sin margin) */
.staff-rule {
  height: 24px;
  background-image:
    linear-gradient(to bottom,
      transparent 0, transparent 3px,
      rgb(181 135 64 / 0.5) 3px, rgb(181 135 64 / 0.5) 4px,
      transparent 4px, transparent 8px,
      rgb(181 135 64 / 0.5) 8px, rgb(181 135 64 / 0.5) 9px,
      transparent 9px, transparent 13px,
      rgb(181 135 64 / 0.5) 13px, rgb(181 135 64 / 0.5) 14px,
      transparent 14px, transparent 18px,
      rgb(181 135 64 / 0.5) 18px, rgb(181 135 64 / 0.5) 19px,
      transparent 19px, transparent 23px,
      rgb(181 135 64 / 0.5) 23px, rgb(181 135 64 / 0.5) 24px);
}