/* ── Page transition ─────────────────────────────────── */
body { opacity: 0; transition: opacity 0.45s ease; }
body.loaded { opacity: 1; }

/* ── Nav overrides for comunidad pages ───────────────── */
/* none needed — reuse existing .nav styles */

/* ── HERO ────────────────────────────────────────────── */
.com-hero {
  min-height: 80vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
  align-items: center;
  padding: calc(var(--nav-h) + 80px) var(--px) 80px;
  max-width: var(--max-w); margin: 0 auto;
  position: relative; overflow: hidden;
}

/* Left column: text */
.com-hero-content { position: relative; z-index: 1; }

.com-hero-label {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 20px;
  opacity: 0;
  transition: opacity 600ms ease 200ms;
}
.com-hero.loaded .com-hero-label { opacity: 1; }

/* Section name — medium bold serif, like "COMUNIDAD" in the reference */
.com-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 600; line-height: 1; letter-spacing: 0.01em;
  color: var(--dark); margin-bottom: 28px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 700ms ease 350ms, transform 700ms cubic-bezier(0.22,1,0.36,1) 350ms;
}
.com-hero.loaded .com-hero-title { opacity: 1; transform: translateY(0); }

/* Big italic statement — the real hero centrepiece */
.com-hero-statement {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 300; font-style: italic; line-height: 1.15;
  color: var(--dark); margin-bottom: 32px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 800ms ease 550ms, transform 800ms cubic-bezier(0.22,1,0.36,1) 550ms;
}
.com-hero.loaded .com-hero-statement { opacity: 1; transform: translateY(0); }

.com-hero-body {
  font-size: 0.9rem; line-height: 1.78; color: var(--dark2);
  max-width: 420px; margin-bottom: 36px;
  opacity: 0;
  transition: opacity 700ms ease 800ms;
}
.com-hero.loaded .com-hero-body { opacity: 0.65; }

/* Short rule at bottom-left, like the reference */
.com-hero-rule {
  width: 0; height: 1px; background: var(--border);
  transition: width 1200ms cubic-bezier(0.25,0.46,0.45,0.94) 1000ms;
}
.com-hero.loaded .com-hero-rule { width: 80px; }

/* Right column: particles canvas */
.com-hero-visual {
  position: relative; z-index: 1;
  height: min(500px, 55vw);
  display: flex; align-items: center; justify-content: center;
}

#hero-particles {
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}

/* Remove old line element — replaced by rule */
.com-hero-line { display: none; }
.com-hero-sub  { display: none; }

#hero-particles {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.com-hero-content { position: relative; z-index: 1; }

/* ── INTRO ───────────────────────────────────────────── */
.com-intro {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--px) 60px;
  border-top: 1px solid var(--border);
}
.com-intro-label {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold); padding-top: 48px;
  margin-bottom: 24px;
}
.com-intro-heading {
  font-family: var(--font-serif); font-size: clamp(1.8rem,3vw,2.8rem);
  font-weight: 300; color: var(--dark); letter-spacing: -0.01em;
}

/* ── PILLARS ─────────────────────────────────────────── */
.com-pillars {
  display: flex; height: 80vh; min-height: 480px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.com-pillar {
  flex: 1;
  position: relative; overflow: hidden;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 40px 32px;
  text-decoration: none; color: inherit;
  background: var(--white);
  transition: flex 650ms cubic-bezier(0.25,0.46,0.45,0.94),
              background-color 500ms ease;
  cursor: pointer;
}
.com-pillar:last-child { border-right: none; }

.com-pillars:hover .com-pillar { flex: 0.80; }
.com-pillars:hover .com-pillar:hover { flex: 1.65; }
.com-pillar[data-pillar="brain"]:hover   { background: rgba(175,200,165,0.12); }
.com-pillar[data-pillar="body"]:hover    { background: rgba(201,221,181,0.12); }
.com-pillar[data-pillar="behavior"]:hover { background: rgba(244,215,122,0.12); }
.com-pillar[data-pillar="womens-data"]:hover { background: rgba(255,242,199,0.15); }

.pillar-canvas-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.pillar-canvas {
  width: 100%; height: 100%;
  opacity: 0.35;
  transition: opacity 600ms ease;
}
.com-pillar:hover .pillar-canvas { opacity: 0.72; }

.pillar-num {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 16px; display: block;
  transition: opacity 300ms ease;
}

.pillar-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 2.8vw, 3.4rem);
  font-weight: 500; letter-spacing: 0.02em;
  color: var(--dark); line-height: 1;
  margin-bottom: 16px;
  transition: letter-spacing 400ms ease;
}
.com-pillar:hover .pillar-title { letter-spacing: 0.04em; }

.pillar-desc {
  font-size: 0.82rem; line-height: 1.65;
  color: var(--dark2); opacity: 0;
  max-width: 260px;
  transform: translateY(8px);
  transition: opacity 400ms ease 100ms, transform 400ms ease 100ms;
}
.com-pillar:hover .pillar-desc { opacity: 0.68; transform: translateY(0); }

.pillar-cta {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--dark);
  opacity: 0; transform: translateY(6px);
  transition: opacity 350ms ease 150ms, transform 350ms ease 150ms;
}
.com-pillar:hover .pillar-cta { opacity: 1; transform: translateY(0); }

.pillar-arrow { transition: transform 250ms ease; }
.com-pillar:hover .pillar-arrow { transform: translateX(4px); }

/* ── CLOSING ─────────────────────────────────────────── */
.com-closing {
  max-width: var(--max-w); margin: 0 auto;
  padding: 100px var(--px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.com-closing-quote {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.2rem,2vw,1.8rem); font-weight: 300;
  color: var(--dark); opacity: 0.55;
  max-width: 640px; line-height: 1.55;
}

/* ── REVEAL ANIMATIONS ───────────────────────────────── */
.reveal-up {
  opacity: 0; transform: translateY(28px);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.22,1,0.36,1);
}
.reveal-up.revealed { opacity: 1; transform: translateY(0); }

.reveal-fade {
  opacity: 0; transition: opacity 900ms ease;
}
.reveal-fade.revealed { opacity: 1; }

/* stagger children */
.stagger-children > * { --si: 0; }
.stagger-children > *:nth-child(1) { --si: 0; }
.stagger-children > *:nth-child(2) { --si: 1; }
.stagger-children > *:nth-child(3) { --si: 2; }
.stagger-children > *:nth-child(4) { --si: 3; }

/* ── SCROLL PROGRESS BAR ─────────────────────────────── */
.scroll-progress {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  height: 1px; background: var(--border); z-index: 99;
}
.scroll-progress-bar {
  height: 100%; background: var(--gold); width: 0%;
  transition: width 100ms linear;
}

/* ── PLACEHOLDER PAGES ───────────────────────────────── */
.placeholder-hero {
  min-height: 80vh; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: calc(var(--nav-h) + 100px) var(--px) 100px;
  max-width: var(--max-w); margin: 0 auto;
}
.placeholder-label {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--sage); margin-bottom: 24px;
}
.placeholder-title {
  font-family: var(--font-serif); font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 500; color: var(--dark); line-height: 0.95;
  letter-spacing: -0.02em; margin-bottom: 32px;
}
.placeholder-sub {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.2rem; font-weight: 300; color: var(--dark); opacity: 0.7;
  margin-bottom: 48px;
}
.placeholder-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 24px; border: 1px solid var(--border);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dark2); opacity: 0.6; border-radius: 100px;
  margin-bottom: 40px;
}
.placeholder-back {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dark);
  border-bottom: 1.5px solid var(--dark); padding-bottom: 3px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.2s, border-color 0.2s; text-decoration: none;
}
.placeholder-back:hover { color: var(--gold); border-color: var(--gold); }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .com-hero { grid-template-columns: 1fr; min-height: auto; }
  .com-hero-visual { height: min(360px, 60vw); }
  .com-pillars { flex-wrap: wrap; height: auto; }
  .com-pillar { flex: 1 1 50%; min-height: 360px; }
  .com-pillars:hover .com-pillar { flex: 1 1 50%; }
  .com-pillars:hover .com-pillar:hover { flex: 1 1 50%; }
  .pillar-desc { opacity: 0.68; transform: none; }
  .pillar-cta  { opacity: 1;    transform: none; }
}

@media (max-width: 768px) {
  .com-hero { gap: 40px; }
  .com-hero-statement { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .com-hero-visual { height: 55vw; min-height: 220px; }
  .com-pillars { flex-direction: column; height: auto; }
  .com-pillar { min-height: 280px; border-right: none; border-bottom: 1px solid var(--border); }
  .com-pillar:last-child { border-bottom: none; }
  .com-pillars:hover .com-pillar { flex: 1; }
}

/* ── REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .com-hero-title,
  .com-hero-statement, .com-hero-body,
  .com-hero-label, .com-hero-rule,
  .reveal-up {
    transition: opacity 300ms ease !important;
    transform: none !important;
  }
  .com-pillars, .com-pillar { transition: none !important; }
}