/* ============================================================
   HARDI LATAM 2026 · Páginas interiores (audiencias + contenido)
   Reutilizable: page-hero, split rows, pain grid, offer stack,
   metric chips, faq. La cargan distribuidores/fabricantes/etc.
   ============================================================ */

/* ---- PAGE HERO (interior, sin video) ---- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--on-dark); background: var(--grad-hero);
  padding-block: clamp(40px, 6vw, 76px) clamp(56px, 8vw, 104px);
}
.page-hero::after {
  content:""; position:absolute; inset:-12% -12% 0; z-index:-1; pointer-events:none;
  background: var(--grad-mesh); filter: blur(7px);
  animation: meshFloat 22s var(--ease) infinite alternate;
}
.page-hero .container { position:relative; z-index:1; }
.page-hero-grid { display:grid; grid-template-columns: 1.3fr .85fr; gap: clamp(32px,5vw,64px); align-items:center; }
.page-hero .breadcrumb { color: var(--on-dark-3); margin-bottom: var(--s-6); }
.page-hero .breadcrumb a { color: var(--on-dark-2); }
.page-hero .breadcrumb a:hover { color:#fff; }
.page-hero .breadcrumb span[aria-current] { color:#fff; }
.page-hero h1 { margin: var(--s-4) 0 var(--s-5); }
.page-hero h1, .page-hero .h1, .page-hero .display { color: var(--on-dark); }
.page-hero .text-grad { color: transparent; }
.page-hero .lede { color: var(--on-dark-2); max-width: 56ch; }
.page-hero .cluster { margin-top: var(--s-8); }
@media (max-width: 940px){ .page-hero-grid { grid-template-columns:1fr; gap: var(--s-10);} }

/* tarjeta glass de métricas en el hero interior */
.metric-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%);
}
.metric-card .eyebrow { color: var(--copper-400); }
.metric-card-list { display:grid; gap: var(--s-5); margin-top: var(--s-6); }
.metric-card-list .stat-num { font-size: var(--fs-40); color:#fff; }
.metric-card-list .stat-label { color: var(--on-dark-2); }

/* ---- SPLIT (imagen + texto alternado) ---- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,72px); align-items:center; }
.split + .split { margin-top: clamp(48px,7vw,96px); }
.split-media img { border-radius: var(--r-lg); width:100%; aspect-ratio: 4/3; object-fit:cover; box-shadow: var(--sh-3); }
.split-body .h2 { margin-bottom: var(--s-4); }
@media (max-width: 860px){
  .split { grid-template-columns:1fr; gap: var(--s-8); }
  .split.reverse .split-media { order:-1; }
}
@media (min-width: 861px){ .split.reverse .split-media { order:2; } }

/* chips de KPI / métricas */
.metric-chips { display:flex; flex-wrap:wrap; gap: var(--s-2); margin: var(--s-5) 0; }
.metric-chip {
  font-family: var(--font-mono); font-size: var(--fs-13); font-weight: var(--w-med);
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--navy-50); color: var(--navy); border:1px solid var(--hairline);
}

/* ---- PAIN GRID (interés / agitar) ---- */
.pain-card .card-icon { background: var(--copper-100); color: var(--copper-700); border-color: var(--copper-200); }
.pain-card h3 { font-family: var(--font-display); font-size: var(--fs-24); margin-bottom: var(--s-2); }
.pain-card p { font-size: var(--fs-15); }

/* ---- CHECKLIST de beneficios ---- */
.benefit-list { display:grid; gap: var(--s-4); margin-top: var(--s-5); }
.benefit-list .check-item p { font-size: var(--fs-16); color: var(--fg-2); }
.benefit-list .check-item strong { color: var(--fg); }

/* ---- OFFER STACK (Hormozi) ---- */
.offer { display:grid; grid-template-columns: 1.5fr 1fr; gap:0; padding:0; overflow:hidden; }
.offer-list { padding: clamp(28px,4vw,52px); }
.offer-list h3 { font-family: var(--font-display); font-size: var(--fs-28); margin-bottom: var(--s-6); }
.offer-aside {
  background: var(--navy); color:#fff; padding: clamp(28px,4vw,52px);
  display:flex; flex-direction:column; justify-content:center; gap: var(--s-5);
}
.offer-aside .eyebrow { color: var(--copper-400); }
.offer-aside h4 { font-family: var(--font-display); font-size: var(--fs-24); color:#fff; font-weight: var(--w-semi); }
.offer-aside .ve-row { display:flex; gap: var(--s-3); align-items:flex-start; }
.offer-aside .ve-row svg { flex:none; width:20px; height:20px; color: var(--copper-400); margin-top:3px; }
.offer-aside .ve-row span { font-size: var(--fs-15); color: var(--on-dark-2); }
.offer-aside .ve-row b { color:#fff; font-weight: var(--w-bold); }
@media (max-width: 760px){ .offer { grid-template-columns:1fr; } .offer-aside { order:-1; } }

/* ---- FAQ wrapper ---- */
.faq-wrap { display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px,5vw,72px); align-items:start; }
@media (max-width: 860px){ .faq-wrap { grid-template-columns:1fr; gap: var(--s-8); } }

/* ---- CHIP NAV (índice de anclas) ---- */
.chip-nav { display:flex; flex-wrap:wrap; gap: var(--s-3); justify-content:center; }
.chip-nav a {
  display:inline-flex; align-items:center; gap: var(--s-2);
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--hairline);
  color: var(--fg-2); font-size: var(--fs-15); font-weight: var(--w-semi);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.chip-nav a .chip-num { color: var(--copper); font-variant-numeric: tabular-nums; }
.chip-nav a:hover { color: var(--fg); border-color: var(--copper-200); transform: translateY(-2px); box-shadow: var(--sh-2); }

/* ancla bajo header sticky */
.pillar-section { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ============================================================
   ACTIVIDADES Y EVENTOS · evento destacado, calendario, tiers
   ============================================================ */

/* ---- EVENT FEATURE (card grande destacada) ---- */
.event-feature {
  display:grid; grid-template-columns: 1.05fr .95fr; gap:0; padding:0; overflow:hidden;
  border-radius: var(--r-xl);
}
.event-feature-media { position:relative; min-height: 100%; }
.event-feature-media img { width:100%; height:100%; object-fit:cover; }
.event-feature-media .event-flag {
  position:absolute; top: var(--s-5); left: var(--s-5);
  display:inline-flex; align-items:center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-13); font-weight: var(--w-med);
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(29,60,71,.82); color:#fff; backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.18);
}
.event-feature-body { padding: clamp(28px,4vw,52px); display:flex; flex-direction:column; gap: var(--s-4); }
.event-feature-body .event-date {
  font-family: var(--font-mono); font-size: var(--fs-14); font-weight: var(--w-semi);
  color: var(--copper-700); letter-spacing: .02em;
}
.event-feature-body h3 { font-family: var(--font-display); font-size: var(--fs-32); }
.event-feature-body .event-place { color: var(--fg-2); font-size: var(--fs-16); }
.event-feature-body .benefit-list { margin-top: var(--s-2); }
.event-feature-body .cluster { margin-top: auto; padding-top: var(--s-4); }
@media (max-width: 820px){
  .event-feature { grid-template-columns:1fr; }
  .event-feature-media { min-height: 260px; }
}

/* ---- TIMELINE (calendario 2026) ---- */
.timeline { display:grid; gap: var(--s-6); margin-top: var(--s-10); }
.timeline-item {
  display:grid; grid-template-columns: 168px 1fr; gap: clamp(20px,3vw,40px);
  align-items:start; position:relative;
  border-top:1px solid var(--hairline); padding-top: var(--s-6);
}
.timeline-date {
  font-family: var(--font-mono); font-weight: var(--w-semi);
  color: var(--navy); font-size: var(--fs-16);
}
.timeline-date .timeline-year { display:block; color: var(--fg-3); font-size: var(--fs-13); font-weight: var(--w-med); margin-top: 2px; }
.timeline-body h3 { font-family: var(--font-display); font-size: var(--fs-24); margin-bottom: var(--s-2); }
.timeline-body .timeline-place { color: var(--fg-3); font-size: var(--fs-14); font-family: var(--font-mono); margin-bottom: var(--s-3); }
.timeline-body p { font-size: var(--fs-16); color: var(--fg-2); }
@media (max-width: 640px){
  .timeline-item { grid-template-columns:1fr; gap: var(--s-3); }
}

/* ---- PRICE TIERS (registro escalonado) ---- */
.tier-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
.tier {
  border:1px solid var(--hairline); border-radius: var(--r-md);
  padding: var(--s-5); background: var(--surface);
  display:flex; flex-direction:column; gap: 2px;
}
.tier .tier-price { font-family: var(--font-display); font-size: var(--fs-28); font-weight: var(--w-bold); color: var(--navy); }
.tier .tier-deadline { font-size: var(--fs-13); color: var(--fg-3); font-family: var(--font-mono); }
@media (max-width: 720px){ .tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px){ .tier-grid { grid-template-columns: 1fr; } }