/* ============================================================
   HARDI LATAM 2026 · Home — secciones con layout propio
   ============================================================ */

/* ---- HERO ---- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--on-dark);
  background: var(--grad-hero);
  padding-block: clamp(96px, 12vh, 180px) clamp(72px, 9vh, 132px);
}
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.16; filter: saturate(.85); }
.hero::after {
  content:""; position:absolute; inset:-12% -12% 0; z-index:-1; pointer-events:none;
  background: var(--grad-mesh); filter: blur(6px);
  animation: meshFloat 22s var(--ease) infinite alternate;
}
.hero .container { position: relative; z-index: 1; }
/* headings del hero en claro (sobre el navy) — el texto plano del h1 heredaba el navy oscuro y quedaba invisible */
.hero .display, .hero h1, .hero .h1 { color: var(--on-dark); }
.hero .text-grad { color: transparent; }
.hero-inner { display:grid; grid-template-columns: 1.35fr .9fr; gap: clamp(32px, 5vw, 72px); align-items:center; }
.hero-copy .display { margin-top: var(--s-5); }
.hero-copy .lede { margin-top: var(--s-5); }

.hero-card {
  border-radius: var(--r-xl); padding: var(--s-8); color:#fff;
  /* cristal OSCURO translúcido: el .glass por defecto es claro y dejaba el texto claro invisible */
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.hero-card .stat-label { color: var(--on-dark-2); }
.hero-card-stats { display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); margin: var(--s-6) 0 var(--s-6); }
.hero-card .stat-num { font-size: var(--fs-40); color:#fff; }
.hero-card .stat-num .unit, .hero-card .stat-num { color:#fff; }
.hero-card .stat-label { color: var(--on-dark-2); }
@media (max-width: 940px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--s-10); }
  .hero-card { max-width: 520px; }
}
@media (max-width: 520px) { .hero-card-stats { grid-template-columns:1fr 1fr; } }

/* ---- NUESTRO ROL ---- */
.role-flow { display:flex; align-items:stretch; gap: var(--s-4); margin-top: var(--s-12); }
.role-node { flex:1; background: var(--surface); border:1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-8); display:flex; flex-direction:column; gap: var(--s-2); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.role-node:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.role-node strong { font-family: var(--font-display); font-size: var(--fs-24); color: var(--fg); }
.role-node span { color: var(--fg-3); font-size: var(--fs-15); }
.role-node.featured { border-color: var(--copper); box-shadow: var(--glow-copper); }
.role-node.featured .card-icon { background: var(--copper-100); color: var(--copper-700); border-color: var(--copper-200); }
.role-arrow { display:grid; place-items:center; color: var(--navy-300); flex:none; }
@media (max-width: 860px) {
  .role-flow { flex-direction:column; }
  .role-arrow { transform: rotate(90deg); padding: var(--s-1) 0; }
}

/* ---- PILARES ---- */
.pilar-card .card-num { display:block; margin-bottom: var(--s-1); }
.pilar-card .h3 { margin-bottom: var(--s-3); }

/* ---- QUOTE BAND ---- */
.quote-band { position:relative; overflow:hidden; }
.quote { max-width: 70ch; }
.quote .display { color:#fff; }

/* ---- EVENTO DESTACADO ---- */
.event-feature { display:grid; grid-template-columns: 1.1fr .9fr; gap: 0; padding: 0; overflow:hidden; }
.event-feature-body { padding: clamp(28px, 4vw, 56px); display:flex; flex-direction:column; justify-content:center; }
.event-feature-media { position:relative; min-height: 320px; }
.event-feature-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.event-date { position:absolute; left: var(--s-6); bottom: var(--s-6); border-radius: var(--r-md); padding: var(--s-3) var(--s-5); display:flex; flex-direction:column; align-items:center; color:#fff; }
.event-date .d { font-family: var(--font-display); font-size: var(--fs-32); font-weight: var(--w-bold); line-height:1; }
.event-date .m { font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing:.1em; }
@media (max-width: 820px) {
  .event-feature { grid-template-columns: 1fr; }
  .event-feature-media { min-height: 240px; order:-1; }
}

/* ---- COMUNIDAD (video real) ---- */
.community { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,5vw,64px); align-items:center; }
.community-media { position:relative; border-radius: var(--r-xl); overflow:hidden; box-shadow: var(--sh-3); aspect-ratio: 16/10; background: var(--navy); }
.community-video { width:100%; height:100%; object-fit:cover; display:block; }
.community-flag { position:absolute; left: var(--s-4); bottom: var(--s-4); }
.community-body .h2 { margin: var(--s-3) 0 var(--s-4); }
@media (max-width: 860px){
  .community { grid-template-columns:1fr; }
  .community-media { order:-1; }
}

/* ---- CTA FINAL ---- */
.cta-final { position:relative; overflow:hidden; }