/* =============================================
   PAGES — Estilos específicos por página
   ============================================= */

/* ─── GENERAL PAGE NAV OFFSET ────────────────── */
/* Para que los anchors no queden debajo del navbar */
[id] { scroll-margin-top: 90px; }

/* ═══════════════════════════════════════════
   INDEX.HTML — Landing Page
   ═══════════════════════════════════════════ */

/* Hero background con gradient mesh */
.index-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.index-hero-bg .mesh-blob--1 { top: -10%; left: -5%; }
.index-hero-bg .mesh-blob--2 { top: 20%; right: -10%; }
.index-hero-bg .mesh-blob--3 { bottom: 5%; left: 30%; }

/* Proyectos section */
.projects-section {
  padding-block: var(--section-py);
  position: relative;
}

.projects-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,229,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.projects-section__header {
  text-align: center;
  margin-bottom: var(--space-9);
}

/* Stats section */
.stats-section {
  padding-block: var(--section-py);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.stats-section__header {
  text-align: center;
  margin-bottom: var(--space-8);
}

/* ═══════════════════════════════════════════
   PROYECTO TEMPLATE — Páginas individuales
   ═══════════════════════════════════════════ */

/* ─── HERO BACKGROUNDS POR PROYECTO ─────────── */
/* Symphony */
.hero-bg--symphony {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-bg--symphony .mesh-blob--1 {
  top: 10%; left: -5%;
  background: rgba(0, 229, 255, 0.13);
}

.hero-bg--symphony .mesh-blob--2 {
  bottom: 20%; right: -8%;
  background: rgba(124, 77, 255, 0.10);
}

/* Nivo */
.hero-bg--nivo .mesh-blob--1 {
  top: 5%; right: -5%;
  background: rgba(0, 230, 118, 0.10);
}

.hero-bg--nivo .mesh-blob--2 {
  bottom: 15%; left: -8%;
  background: rgba(0, 229, 255, 0.08);
}

/* Concordia */
.hero-bg--concordia .mesh-blob--1 {
  top: 0%; left: 10%;
  background: rgba(255, 179, 0, 0.08);
}

.hero-bg--concordia .mesh-blob--2 {
  bottom: 10%; right: 5%;
  background: rgba(124, 77, 255, 0.10);
}

/* Orientación Tributaria */
.hero-bg--tributaria .mesh-blob--1 {
  top: 5%; right: 10%;
  background: rgba(0, 229, 255, 0.10);
}

.hero-bg--tributaria .mesh-blob--2 {
  bottom: 20%; left: -5%;
  background: rgba(255, 64, 129, 0.07);
}

/* ─── OVERVIEW SECTION ───────────────────────── */
.overview-section {
  padding-block: var(--section-py);
  background: var(--bg-secondary);
}

/* ─── FEATURES SECTION ───────────────────────── */
.features-section {
  padding-block: var(--section-py);
  background: var(--bg-primary);
}

/* ─── GALLERY SECTION ────────────────────────── */
.gallery-section {
  padding-block: var(--section-py);
  background: var(--bg-secondary);
}

/* ─── TECH SECTION ───────────────────────────── */
.tech-section {
  padding-block: var(--section-py);
  background: var(--bg-primary);
}

.tech-section__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-9);
  align-items: start;
}

@media (max-width: 900px) {
  .tech-section__inner { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* ─── TIMELINE SECTION ───────────────────────── */
.timeline-section {
  padding-block: var(--section-py);
  background: var(--bg-secondary);
}

.timeline-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}

@media (max-width: 900px) {
  .timeline-section__inner { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* ─── CTA / NAV ENTRE PROYECTOS ──────────────── */
.project-nav-section {
  padding-block: var(--space-9);
  background: var(--bg-primary);
  border-top: 1px solid var(--border-subtle);
}

.project-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.project-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.project-nav__direction {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.project-nav__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.project-nav__link:hover .project-nav__name { color: var(--accent-cyan); }

.project-nav__link--prev .project-nav__name { flex-direction: row-reverse; }

.project-nav__center-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}

@media (max-width: 600px) {
  .project-nav { flex-direction: column; align-items: flex-start; }
  .project-nav__center-btn { align-self: center; }
}

/* ─── COLOR ACENTOS POR PROYECTO ─────────────── */
/* Symphony: Cyan principal */
[data-project="symphony"] .section-label,
[data-project="symphony"] .project-hero__eyebrow { color: #00E5FF; }
[data-project="symphony"] .project-hero__title .text-gradient {
  background: linear-gradient(135deg, #00E5FF, #7C4DFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Nivo: Verde natural */
[data-project="nivo"] .section-label,
[data-project="nivo"] .project-hero__eyebrow { color: #00E676; }
[data-project="nivo"] .project-hero__title .text-gradient {
  background: linear-gradient(135deg, #00E676, #00B8CC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Concordia: Ámbar dorado */
[data-project="concordia"] .section-label,
[data-project="concordia"] .project-hero__eyebrow { color: #FFB300; }
[data-project="concordia"] .project-hero__title .text-gradient {
  background: linear-gradient(135deg, #FFB300, #FF6D00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Tributaria: Violeta */
[data-project="tributaria"] .section-label,
[data-project="tributaria"] .project-hero__eyebrow { color: #7C4DFF; }
[data-project="tributaria"] .project-hero__title .text-gradient {
  background: linear-gradient(135deg, #7C4DFF, #E040FB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── SECTION SEPARATOR ──────────────────────── */
.section-sep {
  width: 100%;
  height: 1px;
  background: var(--border-subtle);
}

/* ─── RESPONSIVE GENERAL ─────────────────────── */
@media (max-width: 768px) {
  .project-hero__ctas { flex-direction: column; }
  .landing-hero__title { max-width: 100%; }
  .stats-bar { border-radius: var(--radius-md); }
}

@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
}