/* Vantoria Capital. Brand layer: machined slate and weathered corten.
   Corner language: every corner is square. One accent, page wide. */

.vsite {
  --v-void: #0e151a;
  --v-pit: #0a0f13;
  --v-steel: #18222a;
  --v-line: #263239;
  --v-muted: #8a98a1;
  --v-bone: #dce2e4;
  --v-corten: #a85b45;
  --v-corten-deep: #7e4030;
  --v-display: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --v-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --v-gutter: 1rem;
  --v-max: 78rem;
  --v-nav: 4.5rem;
  background: var(--v-void);
  color: var(--v-bone);
  font-family: var(--v-display);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 48rem) {
  .vsite { --v-gutter: 2rem; }
}

.vsite *,
.vsite *::before,
.vsite *::after { box-sizing: border-box; }

.v-wrap {
  width: 100%;
  max-width: var(--v-max);
  margin-inline: auto;
  padding-inline: var(--v-gutter);
}

.v-section { padding-block: clamp(4.5rem, 9vw, 8.5rem); }
.v-section--pit { background: var(--v-pit); }
.v-section--steel { background: var(--v-steel); }

.v-eyebrow {
  margin: 0 0 1.5rem;
  font-family: var(--v-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v-corten);
}

.v-h2 {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.04;
  max-width: 18ch;
}

.v-lead {
  margin: 1.5rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--v-muted);
  max-width: 62ch;
}

.v-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 0.75rem 1rem;
  background: var(--v-corten);
  color: var(--v-void);
  font-family: var(--v-mono);
  font-size: 0.8125rem;
}
.v-skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Nav: one line, 72px ---------- */
.v-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  height: var(--v-nav);
  background: color-mix(in srgb, var(--v-void) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--v-line);
}

.v-nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.v-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--v-bone);
  text-decoration: none;
}
.v-brand__mark { display: block; width: 18px; height: 24px; }
.v-brand__word {
  font-family: var(--v-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.v-brand__word span { color: var(--v-muted); }

.v-nav__links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 62rem) { .v-nav__links { display: flex; } }

.v-nav__link {
  position: relative;
  font-size: 0.875rem;
  color: var(--v-muted);
  text-decoration: none;
  padding-block: 0.25rem;
  transition: color 180ms ease;
}
.v-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--v-corten);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.v-nav__link:hover { color: var(--v-bone); }
.v-nav__link:hover::after { transform: scaleX(1); }

.v-nav__end { display: flex; align-items: center; gap: 1.25rem; }

.v-lang { display: flex; align-items: center; gap: 0.5rem; font-family: var(--v-mono); font-size: 0.75rem; letter-spacing: 0.1em; }
.v-lang__sep { color: var(--v-line); }
.v-lang__item { color: var(--v-muted); text-decoration: none; transition: color 160ms ease; }
.v-lang__item:hover { color: var(--v-bone); }
.v-lang__item[aria-current="true"] { color: var(--v-corten); }

/* ---------- CTA 1: solid slab, corten fill ---------- */
.v-cta-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0.8125rem;
  font-size: 0.8125rem;
  background: var(--v-corten);
  color: #120805;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 22%, transparent);
  transition: background 180ms ease, transform 120ms ease;
}
@media (min-width: 30rem) { .v-cta-solid { padding: 0.6875rem 1.125rem; font-size: 0.875rem; } }
.v-cta-solid:hover { background: var(--v-corten-deep); color: var(--v-bone); }
.v-cta-solid:active { transform: translateY(1px); }

/* ---------- CTA 2: ghost with a rule that draws in ---------- */
.v-cta-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8125rem 1.25rem;
  color: var(--v-bone);
  font-family: var(--v-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-bone) 34%, transparent);
  background: color-mix(in srgb, var(--v-void) 55%, transparent);
  overflow: hidden;
}
.v-cta-ghost::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--v-corten);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.v-cta-ghost:hover::before { transform: scaleY(1); }
.v-cta-ghost:active { transform: translateY(1px); }

/* ---------- Journey overrides ---------- */
.vsite .scroll-scrub__title {
  font-family: var(--v-display);
  font-size: clamp(2.25rem, 5.4vw, 4.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.vsite .scroll-scrub__kicker,
.vsite .scroll-scrub__tags li,
.vsite .scroll-scrub__route-button {
  font-family: var(--v-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vsite .scroll-scrub__body { font-size: 1.0625rem; line-height: 1.65; }
.vsite .scroll-scrub__actions { margin-top: 2rem; }

/* ---------- Manifesto ---------- */
.v-manifesto { max-width: 46rem; margin-inline: auto; }
.v-manifesto__rule { width: 4rem; height: 2px; background: var(--v-corten); margin-bottom: 2.5rem; }
.v-manifesto h2 {
  margin: 0 0 2rem;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.v-manifesto p { margin: 0 0 1.5rem; font-size: 1.125rem; line-height: 1.7; color: var(--v-muted); }
.v-manifesto p:last-child { margin-bottom: 0; }

/* ---------- Services: sticky aside + hairline list ---------- */
.v-services { display: grid; gap: 3.5rem; }
@media (min-width: 62rem) {
  .v-services { grid-template-columns: 26rem 1fr; gap: 5rem; align-items: start; }
  .v-services__aside { position: sticky; top: calc(var(--v-nav) + 3rem); }
}
.v-services__figure { margin: 2.5rem 0 0; }
.v-services__figure img { display: block; width: 100%; height: auto; filter: saturate(0.92); }

.v-service { padding-block: 2.5rem; border-top: 1px solid var(--v-line); }
.v-service:last-child { border-bottom: 1px solid var(--v-line); }
.v-service__head { display: flex; align-items: flex-start; gap: 1.25rem; }
.v-service__icon { width: 44px; height: 44px; flex: none; opacity: 0.92; }
.v-service__index { font-family: var(--v-mono); font-size: 0.75rem; letter-spacing: 0.16em; color: var(--v-corten); }
.v-service h3 { margin: 0.5rem 0 0; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; }
.v-service__lead { margin: 0.875rem 0 0; color: var(--v-muted); line-height: 1.65; max-width: 54ch; }
.v-service__points { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; }
.v-service__points li { position: relative; padding-left: 1.5rem; font-size: 0.9375rem; color: var(--v-muted); }
.v-service__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.625rem;
  height: 1px;
  background: var(--v-corten);
}

/* ---------- Method: stepped rail ---------- */
.v-method { margin-top: 4rem; }
.v-step {
  display: grid;
  gap: 0.75rem 2rem;
  padding: 2.25rem 0 2.25rem 2rem;
  border-left: 1px solid var(--v-line);
  position: relative;
}
@media (min-width: 48rem) {
  .v-step { grid-template-columns: 4rem 16rem 1fr; align-items: baseline; padding-left: 3rem; }
}
.v-step::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 2.4rem;
  width: 1px;
  height: 2rem;
  background: var(--v-corten);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.v-step:hover::before { transform: scaleY(1); }
.v-step__index { font-family: var(--v-mono); font-size: 0.8125rem; color: var(--v-corten); letter-spacing: 0.12em; }
.v-step h3 { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.015em; }
.v-step p { margin: 0; color: var(--v-muted); line-height: 1.65; max-width: 52ch; }

/* ---------- Operation: asymmetric split ---------- */
.v-operation { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 62rem) { .v-operation { grid-template-columns: 1.15fr 1fr; gap: 4.5rem; } }
.v-operation__figure { margin: 0; }
.v-operation__figure img { display: block; width: 100%; height: auto; }
.v-checks { margin: 2.5rem 0 0; padding: 0; list-style: none; }
.v-check { display: flex; align-items: center; gap: 1rem; padding: 1.125rem 0; border-top: 1px solid var(--v-line); }
.v-check:last-child { border-bottom: 1px solid var(--v-line); }
.v-check img { width: 30px; height: 30px; flex: none; opacity: 0.9; }
.v-check span { font-size: 0.9375rem; color: var(--v-bone); }

/* ---------- Tracking: data panel over a texture plate ---------- */
.v-tracking { position: relative; overflow: hidden; }
.v-tracking__plate {
  position: absolute;
  inset: 0;
  background-image: url("../brand/plate-graduations.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.5;
}
.v-tracking__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--v-void) 0%, color-mix(in srgb, var(--v-void) 55%, transparent) 45%, var(--v-void) 100%);
}
.v-tracking__inner { position: relative; }
.v-panel { margin-top: 3.5rem; border: 1px solid var(--v-line); background: color-mix(in srgb, var(--v-pit) 88%, transparent); }
.v-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 1.5rem; border-bottom: 1px solid var(--v-line); }
.v-panel__label { font-family: var(--v-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v-muted); }
.v-panel__icon { width: 24px; height: 24px; }
.v-figures { display: grid; }
@media (min-width: 48rem) { .v-figures { grid-template-columns: repeat(3, 1fr); } }
.v-figure { padding: 2rem 1.5rem; border-bottom: 1px solid var(--v-line); }
@media (min-width: 48rem) {
  .v-figure { border-bottom: 0; border-right: 1px solid var(--v-line); }
  .v-figure:last-child { border-right: 0; }
}
.v-figure dt { font-family: var(--v-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-muted); }
.v-figure dd { margin: 0.875rem 0 0; font-family: var(--v-mono); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; letter-spacing: -0.02em; color: var(--v-bone); }
.v-disclaimer { margin: 1.25rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--v-muted); }

/* ---------- FAQ ---------- */
.v-faq { margin-top: 3.5rem; border-top: 1px solid var(--v-line); }
.v-faq details { border-bottom: 1px solid var(--v-line); }
.v-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary:focus-visible { outline: 2px solid var(--v-corten); outline-offset: 4px; }
.v-faq__plus { position: relative; flex: none; width: 14px; height: 14px; }
.v-faq__plus::before,
.v-faq__plus::after { content: ""; position: absolute; background: var(--v-corten); }
.v-faq__plus::before { inset-inline: 0; top: 6px; height: 2px; }
.v-faq__plus::after { inset-block: 0; left: 6px; width: 2px; transition: transform 220ms ease; }
.v-faq details[open] .v-faq__plus::after { transform: scaleY(0); }
.v-faq p { margin: 0 0 1.75rem; padding-right: 2.5rem; color: var(--v-muted); line-height: 1.7; max-width: 68ch; }

/* ---------- Contact ---------- */
.v-contact { display: grid; gap: 3.5rem; }
@media (min-width: 62rem) { .v-contact { grid-template-columns: 1.3fr 1fr; gap: 5rem; align-items: start; } }
.v-form { display: grid; gap: 1.5rem; }
.v-field { display: grid; gap: 0.5rem; }
.v-field label { font-family: var(--v-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-muted); }
.v-field label em { font-style: normal; color: var(--v-line); }
.v-field input,
.v-field textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--v-pit);
  border: 1px solid var(--v-line);
  color: var(--v-bone);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 160ms ease;
}
.v-field textarea { min-height: 8rem; resize: vertical; }
.v-field input:focus,
.v-field textarea:focus { outline: none; border-color: var(--v-corten); }
.v-field__error { font-size: 0.8125rem; color: var(--v-corten); }
.v-consent { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: var(--v-muted); line-height: 1.5; }
.v-consent input { margin-top: 0.2rem; accent-color: var(--v-corten); width: 1rem; height: 1rem; flex: none; }

/* ---------- CTA 3: submit slab with a filling underline ---------- */
.v-cta-slab {
  position: relative;
  display: block;
  width: 100%;
  padding: 1.0625rem 1.25rem;
  background: var(--v-steel);
  color: var(--v-bone);
  border: 1px solid var(--v-line);
  font-family: var(--v-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: transform 120ms ease, color 180ms ease;
}
.v-cta-slab::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--v-corten);
  transform: scaleX(0.12);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.v-cta-slab:hover::after { transform: scaleX(1); }
.v-cta-slab:active { transform: translateY(1px); }
.v-cta-slab[disabled] { cursor: progress; color: var(--v-muted); }

.v-status { margin: 0; padding: 1rem 1.25rem; font-size: 0.9375rem; line-height: 1.6; border: 1px solid var(--v-line); }
.v-status--ok { border-color: var(--v-corten); color: var(--v-bone); }
.v-status--bad { color: var(--v-corten); }

.v-after { border-top: 1px solid var(--v-line); padding-top: 2rem; }
.v-after h3 { margin: 0 0 1.5rem; font-family: var(--v-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v-muted); font-weight: 500; }
.v-after ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; counter-reset: v-after; }
.v-after li { counter-increment: v-after; display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; color: var(--v-muted); line-height: 1.6; font-size: 0.9375rem; }
.v-after li::before { content: counter(v-after, decimal-leading-zero); font-family: var(--v-mono); font-size: 0.75rem; color: var(--v-corten); letter-spacing: 0.1em; padding-top: 0.25rem; }

/* ---------- Footer ---------- */
.v-footer { background: var(--v-pit); border-top: 1px solid var(--v-line); padding-block: 3.5rem; }
.v-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--v-line); }
.v-footer__tag { font-family: var(--v-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-muted); }
.v-footer__legal { margin: 2rem 0 0; font-size: 0.8125rem; line-height: 1.7; color: var(--v-muted); max-width: 72ch; }
.v-footer__rights { margin: 1.25rem 0 0; font-family: var(--v-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--v-muted); opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  .vsite *,
  .vsite *::before,
  .vsite *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  .v-nav__link::after,
  .v-cta-ghost::before,
  .v-step::before { transform: none; }
}

/* The take closes hard on bright oxidised steel, so the stage carries a
   standing scrim: the centre stays clear for the subject while both edges
   hold enough density for the chapter copy to survive every frame. */
.vsite .scroll-scrub__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--v-pit) 90%, transparent) 0%,
      color-mix(in srgb, var(--v-pit) 58%, transparent) 26%,
      color-mix(in srgb, var(--v-pit) 20%, transparent) 50%,
      color-mix(in srgb, var(--v-pit) 58%, transparent) 74%,
      color-mix(in srgb, var(--v-pit) 90%, transparent) 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--v-void) 60%, transparent) 0%,
      transparent 20%,
      transparent 76%,
      color-mix(in srgb, var(--v-void) 62%, transparent) 100%
    );
}

@media (max-width: 48rem) {
  .vsite .scroll-scrub__stage::after {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--v-void) 74%, transparent) 0%,
      color-mix(in srgb, var(--v-void) 42%, transparent) 38%,
      color-mix(in srgb, var(--v-void) 86%, transparent) 100%
    );
  }
}

/* Body copy gets a touch more weight than the engine default so it holds up
   against the moving frame behind it. */
.vsite .scroll-scrub__body {
  color: var(--v-bone);
  max-width: 44ch;
}

/* Narrow phones: the bar carries brand, language and the contact CTA, and at
   390px all three do not fit. The CTA keeps its one page wide label, so the
   room comes from the brand's second word and from moving the language switch
   down to the footer, where it stays reachable. */
.v-cta-solid { white-space: nowrap; }

@media (max-width: 29.99rem) {
  .v-brand__word span { display: none; }
  .v-nav .v-lang { display: none; }
  .v-nav__inner { gap: 0.75rem; }
}

.v-footer__top .v-lang { font-size: 0.75rem; }

/* ==========================================================================
   WordPress: añadidos del tema
   ========================================================================== */

/* Con la barra de administración visible, la navegación baja con ella. */
.admin-bar .v-nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .v-nav { top: 46px; }
}

/* Campo trampa para robots del formulario: fuera de la vista y del lector. */
.v-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.v-consent a {
  color: var(--v-bone);
  text-decoration: underline;
  text-decoration-color: var(--v-corten);
  text-underline-offset: 0.2em;
}

.v-footer__links { margin: 1.25rem 0 0; font-size: 0.8125rem; }
.v-footer__links a {
  color: var(--v-muted);
  text-decoration: underline;
  text-decoration-color: var(--v-line);
  text-underline-offset: 0.2em;
  transition: color 160ms ease;
}
.v-footer__links a:hover { color: var(--v-bone); }

/* Páginas sueltas: política de privacidad, aviso legal, 404. */
.v-page { padding-top: var(--v-nav); min-height: 70vh; }
.v-prose { max-width: 46rem; }
.v-prose .v-h2 { max-width: none; margin-bottom: 2rem; }
.v-prose__body { color: var(--v-muted); font-size: 1.0625rem; line-height: 1.7; }
.v-prose__body > * + * { margin-top: 1.25rem; }
.v-prose__body h2,
.v-prose__body h3,
.v-prose__body h4 {
  margin-top: 2.75rem;
  color: var(--v-bone);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.v-prose__body h2 { font-size: 1.625rem; }
.v-prose__body h3 { font-size: 1.25rem; }
.v-prose__body h4 { font-size: 1.0625rem; }
.v-prose__body strong { color: var(--v-bone); }
.v-prose__body a {
  color: var(--v-bone);
  text-decoration: underline;
  text-decoration-color: var(--v-corten);
  text-underline-offset: 0.2em;
}
.v-prose__body ul,
.v-prose__body ol { padding-left: 1.25rem; }
.v-prose__body ul { list-style: square; }
.v-prose__body ol { list-style: decimal; }
.v-prose__body li + li { margin-top: 0.5rem; }
.v-prose__body li::marker { color: var(--v-corten); }
.v-prose__body blockquote {
  padding-left: 1.25rem;
  border-left: 2px solid var(--v-corten);
}

/* El degradado tras el texto de los capítulos se sale unos píxeles por la
   derecha y creaba scroll horizontal: se recorta sin romper el sticky. */
.vsite .scroll-scrub { overflow-x: clip; }

/* Cifras del panel de datos alineadas abajo aunque las etiquetas ocupen
   distinto número de líneas. */
.v-figure { display: flex; flex-direction: column; }
.v-figure dd { margin-top: auto; padding-top: 0.875rem; }