/* Sistema visual compartido: el inicio es la referencia para todas las rutas. */
:root {
  --ui-ink: #17121d;
  --ui-muted: #6b6270;
  --ui-paper: #f8f5fa;
  --ui-surface: #ffffff;
  --ui-dark: #090611;
  --ui-dark-soft: #120b1a;
  --ui-light-text: #fffafc;
  --ui-light-muted: #cfc5d4;
  --ui-purple: #7138dc;
  --ui-magenta: #d73eaa;
  --ui-orange: #e78a3d;
  --ui-border: rgba(62, 37, 76, .12);
  --ui-border-dark: rgba(255, 255, 255, .12);
  --ui-radius: 24px;
  --ui-shadow: 0 20px 55px rgba(39, 17, 49, .09);
  --ui-section-x: max(6vw, 32px);
  --ui-section-y: clamp(72px, 7vw, 96px);
  --ui-font: Manrope, Montserrat, Arial, sans-serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--ui-font);
}

body {
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-size: 16px;
  line-height: 1.65;
}

/* Tipografía: una sola voz en todas las páginas y bloques. */
.aboutRoute #app :is(h1, h2, h3),
.contentRoute #app :is(h1, h2, h3),
.siteFooter :is(h2, h3, h4),
.blogCard h2,
.contentQuote blockquote,
.aboutStory blockquote {
  font-family: var(--ui-font);
  font-style: normal;
}

.siteFooter .footerAction h2,
.siteFooter h4 {
  font-family: var(--ui-font) !important;
}

.aboutHero h1,
.contentHero h1,
.blogHero h1,
.bookLaunchHero h1 {
  font-family: var(--ui-font);
  font-size: clamp(54px, 6vw, 78px);
  font-weight: 750;
  line-height: .94;
  letter-spacing: -.055em;
}

.aboutStory h2,
.aboutImpact h2,
.aboutCredentials > h2,
.aboutExtensions h2,
.programBlock h2,
.conferenceBlock h2,
.conferenceMomentsHead h2,
.conferenceTrust h2,
.experienceCard h2,
.bookStory h2,
.bookPillars h2,
.bookAuthor h2,
.blogCard h2,
.contentClosing h2 {
  font-family: var(--ui-font);
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.045em;
}

.aboutCredentials > h2,
.aboutExtensions h2,
.conferenceMomentsHead h2,
.conferenceTrust h2,
.bookPillars h2,
.bookAuthor h2 {
  max-width: 920px;
  font-size: clamp(44px, 5.2vw, 70px);
}

.aboutRoute #app h2 em,
.contentRoute #app h1 em,
.contentRoute #app h2 em {
  font-weight: inherit;
  font-style: normal;
  background: linear-gradient(90deg, var(--ui-purple), var(--ui-magenta) 58%, var(--ui-orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.aboutKicker,
.contentKicker,
.axisLabel,
.bookQuoteKicker {
  color: var(--ui-purple);
  font: 750 10px/1.4 var(--ui-font);
  letter-spacing: .24em;
}

.aboutKicker span,
.contentKicker span,
.bookQuoteKicker span {
  background: linear-gradient(90deg, var(--ui-purple), var(--ui-magenta), var(--ui-orange));
}

/* Ritmo compartido de secciones y superficies. */
.aboutStory,
.aboutImpact,
.contentSection,
.contentQuote,
.contentClosing,
.blogClosing {
  padding: var(--ui-section-y) var(--ui-section-x) !important;
}

.aboutHero,
.contentHero,
.blogHero,
.bookLaunchHero {
  min-height: 620px;
  background-color: var(--ui-dark);
  color: var(--ui-light-text);
}

.aboutBiography,
.aboutCredentials,
.aboutExtensions,
.programBlock:not(.programBlockAlt),
.conferenceBlock:not(.programBlockAlt),
.experienceList,
.bookStory,
.bookAuthor,
.blogIndex,
.conferenceTrust {
  background: var(--ui-paper);
  color: var(--ui-ink);
}

.aboutTrajectory,
.programBlockAlt,
.conferenceMoments,
.bookPillars,
.contentQuote,
.contentClosing,
.blogClosing {
  background: var(--ui-dark) !important;
  color: var(--ui-light-text) !important;
}

.aboutStory p,
.programIntro p,
.conferenceCopy > p,
.experienceCopy > p,
.bookStoryCopy > p,
.bookAuthorCopy > p,
.blogCard p,
.contentClosing > p {
  color: var(--ui-muted);
  font-size: 15px;
  line-height: 1.75;
}

.aboutTrajectory p,
.programBlockAlt p,
.conferenceMoments p,
.bookPillars p,
.contentQuote p,
.contentClosing > p,
.blogClosing > p {
  color: var(--ui-light-muted);
}

/* Tarjetas: mismo radio, borde, profundidad y altura dentro de cada grilla. */
.pillarGrid,
.methodGrid,
.aboutCredentialsGrid,
.aboutMediaGrid,
.axisGrid,
.conferenceLogoGrid,
.blogGrid {
  align-items: stretch;
}

.pillarGrid article,
.methodGrid article,
.aboutCredentialsGrid article,
.aboutMediaCard,
.axisGrid article,
.conferenceLogoGrid figure,
.blogCard,
.experienceCard {
  height: 100%;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow);
}

.pillarGrid article,
.aboutCredentialsGrid article,
.aboutMediaCard,
.axisGrid article,
.conferenceLogoGrid figure,
.blogCard,
.experienceCard:not(.reverse) {
  border: 1px solid var(--ui-border) !important;
  background: rgba(255, 255, 255, .9) !important;
}

.methodGrid article,
.programBlockAlt .axisGrid article,
.bookPillars .axisGrid article,
.experienceCard.reverse {
  border: 1px solid var(--ui-border-dark) !important;
  background: rgba(255, 255, 255, .055) !important;
  color: var(--ui-light-text);
}

.pillarGrid article,
.methodGrid article,
.aboutCredentialsGrid article,
.axisGrid article {
  min-height: 260px;
  padding: 30px 28px !important;
}

.axisGrid article h3,
.aboutCredentialsGrid article h3 {
  margin: 26px 0 14px;
  font: 750 clamp(20px, 1.7vw, 26px)/1.08 var(--ui-font);
  letter-spacing: -.035em;
}

.axisGrid article p,
.aboutCredentialsGrid article p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

.experienceCard {
  height: 720px !important;
  min-height: 720px;
  padding: 18px;
}

.experienceImage img,
.conferenceVisual > img,
.aboutStoryImage,
.aboutMediaCard figure,
.blogCard > img {
  border-radius: calc(var(--ui-radius) - 6px);
}

.blogCard {
  display: flex;
  height: 590px;
  min-height: 590px;
  flex-direction: column;
  overflow: hidden;
}

.blogCard > article {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px;
}

.blogCard h2 {
  margin: 16px 0 14px;
  font-size: 27px;
  line-height: 1.06;
}

.blogCard p {
  min-height: 0;
  flex: 1;
}

/* Controles y llamados a la acción comparten forma y color. */
.button,
.navCta,
.footerButton,
.bookLaunchBuy,
.bookBuyInline {
  min-height: 48px;
  border-color: transparent;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--ui-purple), var(--ui-magenta) 62%, var(--ui-orange));
  color: #fff;
  font-family: var(--ui-font);
  font-weight: 750;
}

.contentInfo {
  border-color: var(--ui-border);
}

.programBlockAlt .contentInfo,
.experienceCard.reverse .contentInfo {
  border-color: var(--ui-border-dark);
}

.siteFooter {
  background: var(--ui-dark);
  color: var(--ui-light-text);
}

.siteFooter p,
.siteFooter a,
.siteFooter span {
  font-family: var(--ui-font);
}

@media (max-width: 900px) {
  :root {
    --ui-section-x: 24px;
    --ui-section-y: 72px;
  }

  .experienceCard {
    height: auto !important;
    min-height: 0;
  }
}

@media (max-width: 600px) {
  :root {
    --ui-section-x: 20px;
    --ui-section-y: 62px;
    --ui-radius: 20px;
  }

  body {
    font-size: 15px;
  }

  .aboutHero,
  .contentHero,
  .blogHero {
    min-height: 580px;
  }

  .aboutHero h1,
  .contentHero h1,
  .blogHero h1,
  .bookLaunchHero h1 {
    font-size: clamp(43px, 13vw, 58px);
    line-height: .96;
  }

  .aboutStory h2,
  .aboutImpact h2,
  .aboutCredentials > h2,
  .aboutExtensions h2,
  .programBlock h2,
  .conferenceBlock h2,
  .conferenceMomentsHead h2,
  .conferenceTrust h2,
  .experienceCard h2,
  .bookStory h2,
  .bookPillars h2,
  .bookAuthor h2,
  .contentClosing h2 {
    font-size: clamp(36px, 10vw, 44px);
    line-height: 1.02;
  }

  .pillarGrid article,
  .methodGrid article,
  .aboutCredentialsGrid article,
  .axisGrid article {
    min-height: 0;
    padding: 26px 22px;
  }

  .blogCard {
    height: auto;
    min-height: 0;
  }
}