/* =========================================================================
   /vitalidad — Mapa de Vitalidad (landing cinematográfica)
   ========================================================================= */

.vt-page {
  --pearl: #FAFAF8;
  --pearl-alt: #F3F1EC;
  --sapphire: #1B3A5C;
  --red: #C8362A;
  --gray: #6B6B66;
  --dusk: #3D3D3A;
  --dark: #111110;
  background: var(--pearl);
  color: var(--sapphire);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.vt-page * { box-sizing: border-box; }

/* --- Nav --- */
.vt-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 40px;
  background: rgba(250, 250, 248, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(27, 58, 92, 0.06);
}
.vt-nav-brand img { height: 26px; }
.vt-nav-links { display: flex; gap: 32px; }
.vt-nav-links a {
  font: 500 11px/1 "Inter", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dusk);
  text-decoration: none;
  transition: color .2s;
}
.vt-nav-links a:hover, .vt-nav-links a.is-active { color: var(--red); }

/* --- Common --- */
.vt-eyebrow {
  font: 500 11px/1 "Inter", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gray);
  margin: 0 0 24px;
  display: inline-flex; align-items: center; gap: 10px;
}
.vt-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  display: inline-block;
}

.vt-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  font: 500 13px/1 "Inter", sans-serif;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 999px;
  transition: transform .25s ease, background .25s ease, color .25s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.vt-cta-red { background: var(--red); color: var(--pearl); }
.vt-cta-red:hover { transform: translateY(-2px); background: #b02e23; }
.vt-cta-ghost { color: var(--sapphire); border-color: rgba(27,58,92,.18); }
.vt-cta-ghost:hover { background: var(--sapphire); color: var(--pearl); }
.vt-cta-lg { padding: 20px 36px; font-size: 14px; }

/* --- Hook (scroll-revealed words) --- */
.vt-hook {
  height: 220vh;
  position: relative;
  padding-top: 100px;
  background: var(--pearl);
}
.vt-hook-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 0 6vw;
  text-align: center;
}
.vt-hook-h {
  font: 300 clamp(48px, 11vw, 168px)/1.02 "Inter", sans-serif;
  letter-spacing: -0.035em;
  color: var(--sapphire);
  margin: 0;
  max-width: 1400px;
}
.vt-hook-h span { display: inline-block; transition: opacity .4s, transform .4s; }

/* --- Hero --- */
.vt-hero {
  min-height: 100vh;
  padding: 120px 6vw 80px;
  display: flex; align-items: center;
  background: linear-gradient(180deg, var(--pearl) 0%, var(--pearl-alt) 100%);
}
.vt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 80px;
  width: 100%; max-width: 1400px; margin: 0 auto;
  align-items: center;
}
.vt-hero-h {
  font: 300 clamp(40px, 6.4vw, 96px)/1.05 "Inter", sans-serif;
  letter-spacing: -0.03em;
  color: var(--sapphire);
  margin: 0 0 32px;
}
.vt-hero-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--red);
}
.vt-hero-body {
  font: 400 18px/1.75 "Inter", sans-serif;
  color: var(--dusk);
  max-width: 540px;
  margin: 0 0 40px;
}
.vt-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.vt-hero-right { position: relative; min-height: 480px; }

/* --- Orb --- */
.vt-orb-wrap { position: relative; width: 100%; aspect-ratio: 1; max-width: 560px; margin: 0 auto; }
.vt-orb { width: 100%; height: 100%; transition: transform .4s cubic-bezier(0.16,1,0.3,1); }
@keyframes vtOrbSpin { to { transform: rotate(360deg); } }

/* --- Premisa (dark editorial) --- */
.vt-premisa {
  background: var(--dark);
  color: var(--pearl);
  padding: 180px 8vw;
  display: flex; flex-direction: column; gap: 40px;
  align-items: center; text-align: center;
}
.vt-premisa-line {
  font: 300 clamp(24px, 3.4vw, 44px)/1.4 "Inter", sans-serif;
  letter-spacing: -0.015em;
  color: rgba(250,250,248,0.92);
  max-width: 980px;
  margin: 0;
  transition: opacity .9s cubic-bezier(0.16,1,0.3,1), transform .9s cubic-bezier(0.16,1,0.3,1);
}

/* --- Section common --- */
.vt-section { padding: 140px 6vw; }
.vt-section-head { max-width: 1400px; margin: 0 auto 64px; }
.vt-section-h {
  font: 300 clamp(36px, 5vw, 72px)/1.05 "Inter", sans-serif;
  letter-spacing: -0.025em;
  color: var(--sapphire);
  margin: 0;
}

/* --- Preview --- */
.vt-preview-section { background: var(--pearl); }
.vt-preview { max-width: 1400px; margin: 0 auto; border-top: 1px solid rgba(27,58,92,.12); }
.vt-preview[data-active="true"] .vt-preview-row:not(.is-active) { opacity: 0.32; }
.vt-preview-row {
  display: grid;
  grid-template-columns: 80px minmax(220px, 1.2fr) minmax(0, 1.6fr) 40px;
  gap: 40px;
  align-items: center;
  width: 100%;
  padding: 36px 16px;
  border: none;
  border-bottom: 1px solid rgba(27,58,92,.12);
  background: transparent;
  color: var(--sapphire);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: opacity .35s ease, padding .35s ease, background .35s ease;
}
.vt-preview-row.is-active { padding-left: 32px; background: var(--pearl-alt); }
.vt-preview-num {
  font: 200 32px/1 "Inter", sans-serif;
  color: var(--red);
  letter-spacing: -0.02em;
}
.vt-preview-name {
  font: 300 clamp(22px, 2.6vw, 36px)/1.1 "Inter", sans-serif;
  letter-spacing: -0.02em;
}
.vt-preview-copy {
  font: 400 15px/1.6 "Inter", sans-serif;
  color: var(--gray);
}
.vt-preview-arrow {
  font: 300 24px/1 "Inter", sans-serif;
  color: var(--red);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .3s, transform .3s;
}
.vt-preview-row.is-active .vt-preview-arrow { opacity: 1; transform: translateX(0); }

/* --- CTA --- */
.vt-cta-section {
  padding: 180px 6vw;
  background: linear-gradient(180deg, var(--pearl-alt) 0%, var(--pearl) 100%);
  text-align: center;
}
.vt-cta-h {
  font: 300 clamp(48px, 8vw, 120px)/1.02 "Inter", sans-serif;
  letter-spacing: -0.03em;
  color: var(--sapphire);
  margin: 0 0 32px;
}
.vt-cta-h em { font-style: italic; color: var(--red); font-weight: 300; }
.vt-cta-body {
  font: 400 18px/1.75 "Inter", sans-serif;
  color: var(--dusk);
  max-width: 580px;
  margin: 0 auto 48px;
}

/* --- Footer --- */
.vt-footer {
  background: var(--dark);
  color: rgba(250,250,248,0.7);
  padding: 100px 6vw 60px;
  text-align: center;
}
.vt-footer-tagline {
  font: 500 13px/1 "Inter", sans-serif;
  letter-spacing: 0.24em;
  color: var(--pearl);
  margin-bottom: 40px;
}
.vt-footer-tagline span { color: var(--red); }
.vt-footer-legal {
  font: 400 12px/1.7 "Inter", sans-serif;
  max-width: 760px;
  margin: 0 auto 24px;
  color: rgba(250,250,248,0.5);
}
.vt-footer-copy {
  font: 500 11px/1 "Inter", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250,250,248,0.4);
}

/* --- Responsive --- */
@media (max-width: 820px) {
  .vt-nav { padding: 18px 24px; }
  .vt-nav-links { gap: 18px; }
  .vt-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .vt-hero-right { min-height: 360px; order: -1; }
  .vt-preview-row {
    grid-template-columns: 56px 1fr 28px;
    gap: 20px;
    padding: 28px 12px;
  }
  .vt-preview-copy { grid-column: 1 / -1; padding-left: 76px; margin-top: -4px; }
  .vt-premisa { padding: 100px 6vw; }
  .vt-section { padding: 80px 6vw; }
  .vt-cta-section { padding: 100px 6vw; }
}

/* =========================================================================
   Cyrclo-style additions
   ========================================================================= */

/* Hook sub */
.vt-hook-sub {
  margin: 36px auto 0;
  max-width: 560px;
  font: 400 16px/1.7 "Inter", sans-serif;
  color: var(--gray);
  transition: opacity .6s ease;
}

/* Cyrclo hero composition (replaces orb) */
.vt-cyr {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 620px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 24px;
  background: radial-gradient(120% 90% at 70% 30%, rgba(27,58,92,.10), transparent 60%),
              linear-gradient(180deg, var(--pearl) 0%, var(--pearl-alt) 100%);
  isolation: isolate;
}
.vt-cyr-bloom {
  position: absolute; inset: -20%;
  background: radial-gradient(closest-side, rgba(200,54,42,.18), transparent 70%);
  filter: blur(40px);
  animation: vtBloom 9s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes vtBloom {
  0%   { transform: translate3d(-6%, 4%, 0) scale(1); }
  100% { transform: translate3d(8%, -6%, 0) scale(1.15); }
}
.vt-cyr-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 8px rgba(200,54,42,.10), 0 0 40px rgba(200,54,42,.45);
  transition: transform .35s cubic-bezier(0.16,1,0.3,1);
  z-index: 2;
}
.vt-cyr-stack {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: clamp(2px, 0.5vw, 8px);
  z-index: 1;
  mix-blend-mode: multiply;
}
.vt-cyr-line {
  font: 300 clamp(36px, 8vw, 104px)/0.95 "Inter", sans-serif;
  letter-spacing: -0.04em;
  color: var(--sapphire);
  white-space: nowrap;
  transition: opacity .6s ease, transform .6s cubic-bezier(0.16,1,0.3,1);
}
.vt-cyr-line--out { opacity: 0.08; }
.vt-cyr-line--mid { opacity: 0.22; }
.vt-cyr-line--in  { opacity: 1; }
.vt-cyr-line--in em {
  font-style: italic;
  font-weight: 300;
  color: var(--red);
}
.vt-cyr-marquee {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  overflow: hidden;
  z-index: 3;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.vt-cyr-track {
  display: inline-flex;
  white-space: nowrap;
  animation: vtMarquee 36s linear infinite;
  font: 500 11px/1 "Inter", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dusk);
}
.vt-cyr-track span { padding-right: 0; }
@keyframes vtMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Magnetic CTA cushioned transition */
.vt-cta-magnetic {
  transition: transform .4s cubic-bezier(0.16,1,0.3,1),
              background .25s ease, color .25s ease;
  will-change: transform;
}

/* CTA sub line */
.vt-cta-sub {
  margin: 18px 0 0;
  font: 500 11px/1 "Inter", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}

/* Custom cursor (Cyrclo) */
html.vt-cursor-on, html.vt-cursor-on body { cursor: none; }
html.vt-cursor-on a,
html.vt-cursor-on button,
html.vt-cursor-on .vt-preview-row { cursor: none; }
.vt-cursor-dot, .vt-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate3d(-100px, -100px, 0);
}
.vt-cursor-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--red);
}
.vt-cursor-ring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(27,58,92,.45);
  transition: width .25s ease, height .25s ease, margin .25s ease,
              border-color .25s ease, background .25s ease;
}
.vt-cursor-ring.is-hover {
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border-color: var(--red);
  background: rgba(200,54,42,.08);
}
@media (pointer: coarse) {
  .vt-cursor-dot, .vt-cursor-ring { display: none; }
}

/* Smooth masked transitions between sections */
.vt-premisa, .vt-cta-section, .vt-preview-section {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* =========================================================================
   Blux × Avantys reskin — dark editorial palette
   ========================================================================= */
.vt-page {
  --pearl: #F2EEE6;          /* cream */
  --pearl-alt: #E8E3D7;
  --sapphire: #F2EEE6;       /* text becomes cream on dark */
  --red: #C8362A;
  --gray: rgba(242,238,230,0.55);
  --dusk: rgba(242,238,230,0.78);
  --dark: #0b0e14;
  background: #0b0e14;
  color: #F2EEE6;
}

.vt-nav {
  background: rgba(11,14,20,0.78);
  border-bottom: 1px solid rgba(242,238,230,0.08);
}
.vt-nav-links a { color: rgba(242,238,230,0.72); }
.vt-nav-links a:hover, .vt-nav-links a.is-active { color: var(--red); }
.vt-nav-brand img { filter: none; }

.vt-hook,
.vt-preview-section,
.vt-cta-section {
  background: #0b0e14;
}
.vt-hook-h { color: #F2EEE6; }
.vt-hook-sub { color: rgba(242,238,230,0.6); }

.vt-hero {
  background: linear-gradient(180deg, #0b0e14 0%, #11141b 100%);
}
.vt-hero-h { color: #F2EEE6; }
.vt-hero-h em { color: var(--red); }
.vt-hero-body { color: rgba(242,238,230,0.72); }

.vt-cta-ghost { color: #F2EEE6; border-color: rgba(242,238,230,0.22); }
.vt-cta-ghost:hover { background: #F2EEE6; color: #0b0e14; }

.vt-section-h { color: #F2EEE6; }
.vt-cta-h { color: #F2EEE6; }
.vt-cta-h em { color: var(--red); }
.vt-cta-body { color: rgba(242,238,230,0.7); }

/* Preview rows — editorial list with red hover line (Blux) */
.vt-preview { border-top-color: rgba(242,238,230,0.12); }
.vt-preview-row {
  color: #F2EEE6;
  border-bottom-color: rgba(242,238,230,0.10);
  transition: padding .35s ease, background .35s ease, color .35s ease;
}
.vt-preview-row:hover { color: var(--red); padding-left: 24px; }
.vt-preview-row.is-active { background: rgba(242,238,230,0.04); color: var(--red); }
.vt-preview-num { color: var(--red); }
.vt-preview-copy { color: rgba(242,238,230,0.55); }

/* Cyrclo hero card — dark surface */
.vt-cyr {
  background:
    radial-gradient(120% 90% at 70% 30%, rgba(200,54,42,.18), transparent 60%),
    linear-gradient(180deg, #11141b 0%, #0b0e14 100%);
  border: 1px solid rgba(242,238,230,0.06);
}
.vt-cyr-stack { mix-blend-mode: normal; }
.vt-cyr-line { color: #F2EEE6; }
.vt-cyr-line--out { opacity: 0.14; }
.vt-cyr-line--mid { opacity: 0.36; }
.vt-cyr-line--in em { color: var(--red); }
.vt-cyr-track { color: rgba(242,238,230,0.55); }

/* Cursor on dark */
.vt-cursor-ring { border-color: rgba(242,238,230,0.55); }
.vt-cursor-ring.is-hover { border-color: var(--red); background: rgba(200,54,42,.10); }

/* Hide section masking on uniform-dark layout (no need for soft edges between same-color blocks) */
.vt-premisa, .vt-cta-section, .vt-preview-section {
  -webkit-mask-image: none;
          mask-image: none;
}

/* Footer already dark — keep */
.vt-footer { background: #07090d; }

/* Blux-style oversized eyebrow vertical rhythm */
.vt-section-head { margin-bottom: 96px; }
.vt-section-h { font-size: clamp(40px, 6vw, 88px); }

/* =========================================================================
   Cyrclo hero (rotating cards around centered title)
   ========================================================================= */
.vt-hero-cyr {
  position: relative;
  min-height: 100vh;
  padding: 120px 4vw 80px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(60% 50% at 50% 50%, #11141b 0%, #0b0e14 70%);
  overflow: hidden;
}
.vt-cyrhero {
  position: relative;
  width: min(1100px, 100%);
  aspect-ratio: 1.15 / 1;
  display: flex; align-items: center; justify-content: center;
}
.vt-cyrhero-ring {
  position: absolute; inset: 0;
  transform: rotate(var(--vt-rot, 0deg));
  will-change: transform;
}
.vt-cyrhero-card {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(120px, 13vw, 170px);
  aspect-ratio: 4 / 5;
  margin: 0;
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translateY(calc(-1 * clamp(220px, 38vw, 460px)))
    rotate(calc(-1 * var(--a)));
}
.vt-cyrhero-card-inner {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #1a1d24;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
  transform: rotate(calc(-1 * var(--vt-rot, 0deg)));
  transition: transform .4s ease;
}
.vt-cyrhero-card-inner img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.9;
}
.vt-cyrhero-card-label {
  position: absolute;
  bottom: 8px; left: 10px;
  font: 500 9px/1 "Inter", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,238,230,0.85);
}
.vt-cyrhero-center {
  position: relative;
  text-align: center;
  z-index: 2;
  max-width: 620px;
  padding: 0 16px;
}
.vt-cyrhero-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 11px/1 "Inter", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,238,230,0.7);
  margin-bottom: 28px;
}
.vt-cyrhero-mark::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
}
.vt-cyrhero-title {
  font: 300 clamp(48px, 9vw, 128px)/1 "Inter", sans-serif;
  letter-spacing: -0.04em;
  color: #F2EEE6;
  margin: 0 0 26px;
}
.vt-cyrhero-sub {
  font: 400 16px/1.7 "Inter", sans-serif;
  color: rgba(242,238,230,0.62);
  max-width: 460px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .vt-cyrhero { aspect-ratio: 0.9 / 1; }
  .vt-cyrhero-card { width: 92px; }
}

/* =========================================================================
   Diagnostico section (video background + single column)
   ========================================================================= */
.vt-diag {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 140px 6vw;
  background: linear-gradient(180deg, #0b0e14 0%, #11141b 100%);
}
.vt-diag-content {
  position: relative;
  max-width: 720px;
}

/* =========================================================================
   Premisa editorial — centered scroll focus + color shift
   ========================================================================= */
.vt-premisa-edit {
  color: #F2EEE6;
  padding: 220px 6vw 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 80px;
  transition: background-color .4s ease;
}
.vt-premisa-head { max-width: 900px; }
.vt-premisa-head .vt-eyebrow { color: rgba(242,238,230,0.7); justify-content: center; }
.vt-hero-cyr .vt-eyebrow,
.vt-diag .vt-eyebrow,
.vt-preview-section .vt-eyebrow { color: rgba(242,238,230,0.7); }
.vt-premisa-lines {
  display: flex; flex-direction: column;
  gap: clamp(36px, 5.5vw, 80px);
  max-width: 1100px;
  width: 100%;
}
.vt-premisa-line-edit {
  font: 300 clamp(28px, 4.6vw, 64px)/1.2 "Inter", sans-serif;
  letter-spacing: -0.025em;
  color: #F2EEE6;
  margin: 0;
  text-align: center;
  transition: opacity .35s ease, filter .35s ease;
  will-change: opacity, filter;
}

/* =========================================================================
   Diagnostico — interactive bio blobs (lava-lamp lights)
   ========================================================================= */
.vt-diag { overflow: hidden; }
.vt-diag-blobs {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.vt-diag-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .32;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  transform: translate3d(var(--bx,0px), var(--by,0px), 0) scale(var(--bs,1));
  transition: opacity .35s ease, filter .35s ease;
}
.vt-diag-blob.is-pushed { opacity: .45; filter: blur(70px); }
.vt-diag-blob--teal  { width: 30vw; height: 30vw; left:  6%; top:  8%;  background: radial-gradient(circle, #4a8590 0%, rgba(60,110,120,.4) 45%, rgba(36,61,73,0) 75%); opacity:.30; }
.vt-diag-blob--ember { width: 22vw; height: 22vw; left: 64%; top: 18%;  background: radial-gradient(circle, #b03838 0%, rgba(150,35,35,.35) 45%, rgba(120,20,20,0) 75%); opacity:.22; }
.vt-diag-blob--deep  { width: 34vw; height: 34vw; left: 38%; bottom: -8%; background: radial-gradient(circle, #2f5a66 0%, rgba(34,64,74,.4) 45%, rgba(20,40,48,0) 75%); opacity:.34; }
.vt-diag-content { position: relative; z-index: 1; }