:root {
  --ink: #0d1b2a;
  --ink-soft: #2b3a4a;
  --paper: #f3eee6;
  --paper-light: #faf8f4;
  --lapis: #173451;
  --lapis-deep: #09131f;
  --moss: #1e3d54;
  --sage: #7d9cb8;
  --clay: #c8933b;
  --gold: #c8933b;
  --gold-hover: #b07e2c;
  --gold-light: #e8bf73;
  --turquoise: #236574;
  --line: rgba(13, 27, 42, 0.12);
  --font-display: "Bodoni Moda", Georgia, serif;
  --font-body: "Manrope", sans-serif;
}

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

h1, h2, h3, h4 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
}

h1 { font-size: clamp(3.2rem, 7vw, 7rem); line-height: 0.95; }
h2 { font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 1; }
p { color: var(--ink-soft); }

.container { max-width: 1280px; padding-inline: 38px; }
.eyebrow { color: var(--gold); font-size: 0.72rem; letter-spacing: 0.2em; font-weight: 700; }

.site-header {
  background: rgba(250, 248, 244, 0.94);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}
.nav { min-height: 84px; padding-block: 16px; }
.brand { color: var(--ink); font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.brand svg { color: var(--gold); width: 34px; height: 34px; }
.nav-links { gap: 24px; }
.nav-links a { color: var(--ink); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.3s ease; }
.nav-links a:hover { color: var(--gold); }
.nav-links a.active { color: var(--gold); }
.nav-links a.active::after { background: var(--gold); }
.nav-links .btn-primary { color: #ffffff; background: var(--ink); }
.nav-links .btn-primary:hover { background: var(--gold); }

.btn { border-radius: 0; padding: 14px 22px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.btn-primary { background: var(--gold); box-shadow: none; color: #ffffff; border: 1px solid var(--gold); }
.btn-primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #ffffff; }

.hero-home {
  min-height: calc(100svh - 84px);
  padding: 0;
  position: relative;
  color: white;
  background: var(--ink);
}
.hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9, 19, 31, 0.88) 0%, rgba(13, 27, 42, 0.52) 48%, rgba(13, 27, 42, 0.12) 75%);
}
.hero-home .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-home .container { min-height: calc(100svh - 84px); display: flex; align-items: flex-end; position: relative; z-index: 1; padding-bottom: 8vh; }
.hero-home .hero-text { max-width: 890px; }
.hero-home h1 { color: white; max-width: 850px; margin-bottom: 0.25em; }
.hero-home .eyebrow { color: var(--gold-light); }
.hero-home .lead { color: rgba(255,255,255,0.85); max-width: 650px; font-size: 1.03rem; }
.hero-home .btn-primary { background: var(--gold); color: #ffffff; border-color: var(--gold); }
.hero-home .btn-primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: #ffffff; }
.hero-home .btn-outline { border-color: rgba(255,255,255,0.8); color: white; }
.hero-home .btn-outline:hover { background: white; color: var(--ink); }
.hero-inspiration {
  margin: 22px 0 0;
  color: rgba(255,255,255,0.7);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.hero-inspiration a {
  color: var(--gold-light);
  border-bottom: 1px solid rgba(232, 191, 115, 0.6);
  font-weight: 700;
}
.hero-inspiration a:hover { border-color: #ffffff; color: #ffffff; }

.intro-manifesto { background: var(--paper); }
.method-intro {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(40px, 8vw, 110px);
  align-items: center;
  padding-bottom: 58px;
  border-bottom: 1px solid var(--line);
}
.method-intro h2 { max-width: 520px; margin-bottom: 0; }
.method-intro > p { max-width: 680px; margin: 0; font-size: 1.02rem; }
.method-intro a { color: var(--gold); border-bottom: 1px solid currentColor; font-weight: 700; }
.method-intro a:hover { color: var(--ink); }
.method-topic { display: flex; gap: 18px; align-items: baseline; margin-top: 42px; }
.method-topic span { color: var(--gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; }
.method-topic h3 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.contact-form-heading { margin-bottom: 32px; }
.contact-form-heading h2 {
  max-width: 500px;
  margin: 0 auto 0.45em;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.08;
}
.contact-form-heading p { max-width: 500px; margin: 0 auto; }
.form-wrap .field input,
.form-wrap .field textarea {
  border-radius: 0;
  border-color: var(--line);
  background: var(--paper);
}
.form-wrap .field input:focus,
.form-wrap .field textarea:focus { border-color: var(--gold); outline: none; }
.contact-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  color: var(--ink-soft);
  font-size: 0.72rem;
  text-transform: uppercase;
}
.contact-divider::before,
.contact-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-whatsapp {
  width: 100%;
  justify-content: center;
  border: 1px solid #1f7a55;
  color: #1a6345;
  background: transparent;
}
.btn-whatsapp svg { width: 20px; height: 20px; }
.btn-whatsapp:hover { background: #1f7a55; color: white; }
.manifesto-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1.68fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: start;
}
.manifesto-meta { padding-top: 8px; }
.manifesto-number { color: var(--gold); font: 500 5.5rem/0.85 var(--font-display); }
.manifesto-copy { max-width: 850px; }
.manifesto-copy h2 { max-width: 780px; }
.manifesto-copy .lead { max-width: 680px; margin-left: 0; }

.signals { border-top: 1px solid var(--line); margin-top: 64px; }
.signal { display: grid; grid-template-columns: 80px 1fr 24px; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: center; }
.signal strong { color: var(--turquoise); font-size: 0.76rem; letter-spacing: 0.12em; }
.signal p { margin: 0; color: var(--ink); font: 500 clamp(1.2rem, 2vw, 1.8rem)/1.2 var(--font-display); }
.signal span:last-child { font-size: 1.4rem; color: var(--gold); }

.editorial-story { padding: 0; background: var(--lapis); }
.editorial-story .container { padding: 0; max-width: none; display: grid; grid-template-columns: 0.82fr 1.18fr; }
.editorial-image { min-height: 720px; width: 100%; height: 100%; object-fit: cover; background: var(--lapis); }
.editorial-copy { padding: clamp(60px, 9vw, 140px); display: flex; flex-direction: column; justify-content: center; background: var(--lapis); }
.editorial-copy h2 { color: white; }
.editorial-copy p { color: rgba(255,255,255,0.85); max-width: 570px; }
.editorial-copy .eyebrow { color: var(--gold-light); }
.editorial-copy .btn-outline { border-color: rgba(255,255,255,0.8); color: white; }
.editorial-copy .btn-outline:hover { background: var(--gold); border-color: var(--gold); color: white; }

.quote-stage { background: linear-gradient(135deg, #c8933b 0%, #ba832b 100%); padding-block: 120px; box-shadow: inset 0 0 60px rgba(0,0,0,0.06); }
.quote-stage blockquote.quote { color: white; font-size: clamp(2rem, 4vw, 4.2rem); font-style: normal; line-height: 1.08; max-width: 1050px; }
.quote-stage blockquote.quote cite { color: rgba(255,255,255,0.8); }

.principles { background: var(--paper-light); }
.principles-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; margin-bottom: 70px; }
.principles-head > .lead { margin-bottom: 0; }
.principles-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.principle { padding: 34px 32px 10px 0; border-right: 1px solid var(--line); }
.principle + .principle { padding-left: 32px; }
.principle:last-child { border-right: 0; }
.principle .index { color: var(--turquoise); display: block; margin-bottom: 60px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; }
.principle h3 { font-size: 2rem; color: var(--ink); }

.cta-final { background: var(--moss); padding-block: 120px; }
.cta-final h2 { color: white; font-size: clamp(2.5rem, 5vw, 5rem); }
.cta-final .btn-primary { background: var(--gold); color: #ffffff; border-color: var(--gold); }
.cta-final .btn-primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.cta-cosmos {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, #07101a 0%, #173451 52%, #0b1827 100%);
}
.cta-cosmos::before,
.cta-cosmos::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
}
.cta-cosmos::before {
  background-image:
    radial-gradient(circle at 7% 24%, rgba(255,255,255,0.95) 0 1px, transparent 1.8px),
    radial-gradient(circle at 14% 72%, rgba(232,191,115,0.85) 0 1.2px, transparent 2px),
    radial-gradient(circle at 23% 38%, rgba(255,255,255,0.75) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 31% 82%, rgba(255,255,255,0.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 42% 18%, rgba(232,191,115,0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 68%, rgba(255,255,255,0.78) 0 1px, transparent 1.8px),
    radial-gradient(circle at 63% 31%, rgba(255,255,255,0.9) 0 1.2px, transparent 2px),
    radial-gradient(circle at 72% 79%, rgba(232,191,115,0.82) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 83% 16%, rgba(255,255,255,0.82) 0 1px, transparent 1.8px),
    radial-gradient(circle at 91% 58%, rgba(255,255,255,0.95) 0 1.2px, transparent 2px);
  filter: drop-shadow(0 0 4px rgba(232,191,115,0.72));
  animation: cosmos-twinkle 3.2s ease-in-out infinite alternate;
}
.cta-cosmos::after {
  background-image:
    radial-gradient(circle at 10% 48%, rgba(255,255,255,0.58) 0 0.7px, transparent 1.4px),
    radial-gradient(circle at 19% 12%, rgba(255,255,255,0.7) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 28% 61%, rgba(232,191,115,0.72) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 38% 43%, rgba(255,255,255,0.62) 0 0.7px, transparent 1.4px),
    radial-gradient(circle at 49% 88%, rgba(255,255,255,0.72) 0 0.9px, transparent 1.6px),
    radial-gradient(circle at 59% 9%, rgba(232,191,115,0.68) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 69% 52%, rgba(255,255,255,0.66) 0 0.7px, transparent 1.4px),
    radial-gradient(circle at 78% 37%, rgba(255,255,255,0.74) 0 0.9px, transparent 1.6px),
    radial-gradient(circle at 88% 84%, rgba(232,191,115,0.7) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 96% 27%, rgba(255,255,255,0.68) 0 0.7px, transparent 1.4px);
  filter: drop-shadow(0 0 3px rgba(232,191,115,0.62));
  animation: cosmos-twinkle-soft 4.6s ease-in-out 0.6s infinite alternate;
}
.cta-cosmos .container { position: relative; z-index: 1; }
.cta-cosmos h2 {
  animation: consciousness-light 5.2s ease-in-out infinite;
}

@keyframes cosmos-twinkle {
  0%, 22% { opacity: 0.28; transform: scale(1); }
  56% { opacity: 1; }
  100% { opacity: 0.58; transform: scale(1.025); }
}
@keyframes cosmos-twinkle-soft {
  0% { opacity: 0.88; transform: translate3d(0, 0, 0); }
  48% { opacity: 0.22; }
  100% { opacity: 1; transform: translate3d(8px, -5px, 0); }
}
@keyframes consciousness-light {
  0%, 100% { text-shadow: 0 0 0 rgba(232,191,115,0); }
  50% { text-shadow: 0 0 24px rgba(232,191,115,0.35); }
}

.site-footer { background: var(--lapis-deep); border-top: 1px solid rgba(255,255,255,0.08); }
.site-footer a:hover { color: var(--gold-light); }
.footer-brand { font-family: var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8rem; }

/* Interior pages inherit the new editorial language. */
.hero:not(.hero-home) { background: var(--paper); padding: 110px 0 80px; }
.hero:not(.hero-home) h1 { font-size: clamp(3rem, 6vw, 6rem); color: var(--ink); }
.hero.hero-compact { padding: clamp(54px, 6vw, 78px) 0 clamp(44px, 5vw, 64px); }
.hero .hero-compact-content {
  display: block;
  max-width: 860px;
  margin: 0 auto;
}
.hero.hero-compact h1 {
  max-width: 800px;
  margin-inline: auto;
  font-size: clamp(2.5rem, 4.5vw, 4.25rem);
  line-height: 1.04;
}
.hero.hero-compact .lead {
  max-width: 700px;
  font-size: 1rem;
  line-height: 1.7;
}
.card, .carriage-part, .nafs-step, .acc-item, .form-wrap { border-radius: 0; border-color: var(--line); box-shadow: none; background: #ffffff; }
.card:hover { box-shadow: 0 8px 24px rgba(13,27,42,0.06); border-color: var(--gold); }
.section-alt { background: var(--paper); }
.section-dark { background: var(--ink); }
.carriage-part.active { border-color: var(--gold); background: #f2ebe1; }
.carriage-detail { border-radius: 0; background: var(--lapis); border-left: 3px solid var(--gold); }
.carriage-experience {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  gap: 28px;
  align-items: stretch;
  margin-top: 52px;
}
.carriage-visual {
  margin: 0;
  max-width: none;
  padding: 0 0 14px;
  background: var(--lapis-deep);
  border: 1px solid var(--line);
  overflow: hidden;
}
.carriage-panel { display: flex; flex-direction: column; min-width: 0; }
.carriage-panel .carriage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
.carriage-panel .carriage-part { min-height: 154px; padding: 18px; }
.carriage-panel .carriage-part .icon { width: 30px; height: 30px; margin-bottom: 10px; color: var(--turquoise); }
.carriage-panel .carriage-detail { flex: 1; margin-top: 14px; padding: 24px; }
.carriage-detail h4 { margin-bottom: 0.65em; color: var(--gold-light); }
.carriage-detail p {
  margin-bottom: 0;
  color: rgba(251, 250, 246, 0.88);
  font-size: 0.9rem;
  line-height: 1.65;
}
.carriage-photo { position: relative; isolation: isolate; overflow: hidden; }
.carriage-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(9,19,31,0.28);
  transition: background 0.4s ease;
}
.carriage-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.photo-zone {
  position: absolute;
  z-index: 2;
  display: block;
  opacity: 0;
  pointer-events: none;
  border: 3px solid rgba(232,191,115,0.95);
  background: rgba(200,147,59,0.24);
  box-shadow: 0 0 0 999px rgba(9,19,31,0.22), 0 0 30px rgba(232,191,115,0.48);
  transition: opacity 0.3s ease;
}
.photo-zone.active { opacity: 1; animation: photo-focus 0.75s cubic-bezier(.2,.8,.2,1); }
.zone-chassis { left: 15%; top: 44%; width: 25%; height: 31%; clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%); }
.zone-horses { left: 45%; top: 50%; width: 25%; height: 25%; border-radius: 40% 50% 30% 20%; }
.zone-driver { left: 35%; top: 47%; width: 10%; height: 20%; border-radius: 50% 50% 20% 20%; }
.zone-owner { left: 24%; top: 54%; width: 6%; height: 10%; border-radius: 50%; }
.visual-hint { margin: 12px 16px 0; text-align: center; font-size: 0.76rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.75); }
.carriage-detail.detail-enter { animation: detail-enter 0.45s ease both; }
.soul-levels-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: stretch;
  margin-top: 54px;
}
.soul-levels-figure {
  position: relative;
  min-height: 720px;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}
.soul-levels-figure img { width: 100%; height: 100%; object-fit: cover; }
.soul-levels-figure figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 46px 24px 20px;
  color: rgba(255,255,255,0.85);
  background: linear-gradient(0deg, rgba(9,19,31,0.9), transparent);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}
.soul-levels-layout .escalera { max-width: none; margin: 0; }
.story-heart-mirror { gap: clamp(48px, 8vw, 110px); }
.heart-mirror-art {
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 560px;
  overflow: hidden;
  background: var(--ink);
}
.heart-mirror-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@keyframes photo-focus {
  0% { opacity: 0; transform: scale(0.94); }
  55% { opacity: 1; transform: scale(1.025); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes detail-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .visual-part.active, .carriage-detail.detail-enter, .cta-cosmos::before, .cta-cosmos::after, .cta-cosmos h2 { animation: none; }
}
.escalon.espiritual .num { background: var(--gold); }

@media (max-width: 900px) {
  .container { padding-inline: 24px; }
  .nav { min-height: 72px; }
  .nav-links { background: var(--paper-light); }
  .hero-home, .hero-home .container { min-height: calc(100svh - 72px); }
  .hero-home .container { align-items: flex-end; padding-bottom: 56px; }
  .hero-home::after { background: linear-gradient(0deg, rgba(9,19,31,0.92) 0%, rgba(9,19,31,0.35) 75%); }
  .hero-home .hero-photo { object-position: 72% center; }
  .hero-home h1 { font-size: clamp(3rem, 14vw, 5rem); }
  .manifesto-grid, .principles-head, .method-intro { grid-template-columns: 1fr; gap: 40px; }
  .method-intro { padding-bottom: 42px; }
  .method-topic { margin-top: 34px; }
  .manifesto-copy .lead { margin-left: 0; }
  .editorial-story .container { grid-template-columns: 1fr; }
  .editorial-image { min-height: 460px; }
  .editorial-copy { padding: 64px 24px; }
  .principles-list { grid-template-columns: 1fr; }
  .principle, .principle + .principle { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .principle .index { margin-bottom: 24px; }
  .carriage-experience { grid-template-columns: 1fr; margin-top: 36px; }
  .carriage-panel .carriage { grid-template-columns: repeat(2, 1fr); }
  .soul-levels-layout { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  .soul-levels-figure { min-height: 0; aspect-ratio: 4 / 3; }
  .soul-levels-figure img { object-position: center 64%; }
  .heart-mirror-art { min-height: 0; aspect-ratio: 4 / 3; }
  .heart-mirror-art img { object-position: center 58%; }
  section { padding-block: 72px; }
}

@media (max-width: 560px) {
  .brand { max-width: 230px; font-size: 0.68rem; }
  .hero-home .lead { font-size: 0.92rem; }
  .hero-cta { display: grid; }
  .hero-cta .btn { justify-content: center; }
  .signal { grid-template-columns: 46px 1fr 18px; }
  .manifesto-number { font-size: 4.5rem; }
  .carriage-panel .carriage { grid-template-columns: 1fr; }
}