/* 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: #160b20;
  --ui-dark-soft: #2a1533;
  --ui-dark-gradient:
    radial-gradient(circle at 9% 14%, rgba(137, 78, 255, .32), transparent 34%),
    radial-gradient(circle at 91% 82%, rgba(224, 70, 184, .24), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(113, 56, 220, .12) 52%, rgba(215, 62, 170, .14)),
    var(--ui-dark);
  --ui-light-text: #fffafc;
  --ui-light-muted: #cfc5d4;
  --ui-purple: #7138dc;
  --ui-magenta: #d73eaa;
  --ui-orange: #e78a3d;
  --ui-title-accent: #b667e8;
  --ui-title-gradient: linear-gradient(100deg, #a96fff 0%, #df5dca 52%, #f0955f 100%);
  --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-title-max: 82px;
  --ui-home-title-max: 66px;
  --ui-hero-title-max: 78px;
  --ui-block-title-size: clamp(42px, 6vw, var(--ui-title-max));
  --ui-font: Manrope, Montserrat, Arial, sans-serif;
  --ui-heading-font: var(--ui-font);
  --ui-body-size: 17px;
  --ui-copy-size: 17px;
}

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

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

/* Lectura más cómoda sin alterar la escala de los títulos. */
#app p:not(.eyebrow):not(.contentKicker):not(.aboutKicker):not(.axisLabel):not(.bookQuoteKicker):not(.heroTerritories),
#app li {
  font-size: clamp(calc(var(--ui-copy-size) - 1px), 1.12vw, var(--ui-copy-size));
}

#app small {
  font-size: 12px;
  line-height: 1.5;
}

#app :is(.button, .textLink, .contentTextLink, .bookLaunchBuy, .bookLaunchStory, .bookBuyInline, .bookAuthorLink),
.siteFooter :is(p, a) {
  font-size: 14px;
}

#app :is(.eyebrow, .contentKicker, .aboutKicker, .axisLabel, .bookQuoteKicker),
#app .bookQuoteFooter p {
  font-size: 11px;
}

/* 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-heading-font);
  font-style: normal;
}

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

#app :is(h1, h2, h3),
.siteFooter :is(h2, h3, h4) {
  font-family: var(--ui-heading-font) !important;
}

.hero h1 {
  font-size: clamp(42px, 3.85vw, var(--ui-home-title-max));
}

.aboutHero h1,
.contentHero h1,
.blogHero h1,
.bookLaunchHero h1 {
  font-family: var(--ui-heading-font);
  font-size: clamp(43px, 6vw, var(--ui-hero-title-max));
  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-heading-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);
}

/* Una sola escala para los títulos principales de cada bloque. */
:is(
  .sectionHead h2,
  .manifestoCopy h2,
  .challengeIntro h2,
  .authorityHead h2,
  .aboutCopy h2,
  .bookCopy h2,
  .podcast h2,
  .contactCopy h2,
  .editorialClosing h2,
  .aboutStory h2,
  .aboutImpact h2,
  .aboutCredentials > h2,
  .aboutExtensionsHead h2,
  .programBlock > h2,
  .conferenceCopy h2,
  .conferenceMomentsHead h2,
  .conferenceTrust h2,
  .experienceCopy h2,
  .bookStoryHeading h2,
  .bookPillars > h2,
  .bookAuthorCopy h2,
  .contentClosing h2,
  .blogClosing h2
) {
  font-size: var(--ui-block-title-size) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}

.editorialClosing.editorialClosing h2,
.editorialClosing--home.editorialClosing h2,
.aboutRoute .editorialClosing.editorialClosing h2,
.contentRoute .editorialClosing.editorialClosing h2,
.bookClosing.bookClosing h2 {
  font-size: var(--ui-block-title-size) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}

.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;
}

/* Degradado de títulos con luminosidad pareja y opacidad completa. */
#app :is(h1, h2) em {
  background: var(--ui-title-gradient) !important;
  background-image: var(--ui-title-gradient) !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: var(--ui-title-accent) !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.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-gradient) !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, .10) !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;
    --ui-block-title-size: clamp(40px, 8vw, var(--ui-title-max));
  }

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

@media (max-width: 600px) {
  :root {
    --ui-section-x: 20px;
    --ui-section-y: 62px;
    --ui-radius: 20px;
    --ui-block-title-size: clamp(34px, 12vw, var(--ui-title-max));
  }

  body {
    font-size: var(--ui-body-size);
  }

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

  .aboutHero h1,
  .contentHero h1,
  .blogHero h1,
  .bookLaunchHero h1 {
    font-size: clamp(36px, 13vw, var(--ui-hero-title-max));
    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;
  }
}

/* Experiencia 02: la tarjeta invertida vive sobre una sección clara y debe
   conservar el contraste del sistema oscuro usado en los demás bloques. */
.experiencesRoute .experienceCard.reverse {
  background: linear-gradient(135deg, #130b1e, #24102e) !important;
  border-color: rgba(216, 184, 255, .18) !important;
  color: #fff !important;
}

.experiencesRoute .experienceCard.reverse .experienceCopy h2 {
  color: #fffafc !important;
  -webkit-text-fill-color: currentColor !important;
}

.experiencesRoute .experienceCard.reverse .contentKicker {
  color: #d8b8ff !important;
}

.experiencesRoute .experienceCard.reverse .experienceCopy > p:not(.contentKicker),
.experiencesRoute .experienceCard.reverse .benefitList p {
  color: #d8cedd !important;
}

.experiencesRoute .experienceCard.reverse .benefitList {
  border-color: rgba(255, 255, 255, .14) !important;
}