/* =========================================================
   SISTEMA PROMETEO — Design tokens & base
   ========================================================= */
:root {
  --color-black: #000000;
  --color-surface: #0d0d0d;
  --color-surface-2: #131313;
  --color-white: #ffffff;
  --color-red: #f50403;
  --color-red-dim: #a80302;

  /* Expanded neutral palette (Art Direction V2) — Paper/Ebony/Silver.
     First real usage lands with the light chapter in #como-funciona
     ("Actualización 24": Professional Pass V5). */
  --color-paper: #e9dfdd;
  --color-ebony: #131210;
  --color-silver: #c7c8c5;

  --color-text: rgba(255, 255, 255, 0.92);
  --color-text-secondary: rgba(255, 255, 255, 0.64);
  /* "Launch QA": raised from 0.42 → 0.5 — measured 3.95:1 against pure
     black across ~19 real elements (disclaimers, legal links, form hints),
     below the WCAG 1.4.3 AA minimum of 4.5:1 for normal-size text. 0.5
     measures ~5.3:1, comfortably clears it. Same three-tier hierarchy
     (text > secondary > tertiary) is preserved, just less faint. */
  --color-text-tertiary: rgba(255, 255, 255, 0.5);
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.22);

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Inter Tight", "Inter", -apple-system, sans-serif;

  --wrapper-max: 78rem;
  --wrapper-pad: 2.25rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --radius-lg: 1.5rem;
  --radius-md: 1rem;
  --radius-sm: 0.5rem;
}

@media (max-width: 768px) {
  :root {
    --wrapper-pad: 1.25rem;
  }
}

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

html {
  background: var(--color-black);
  color-scheme: dark;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
  background: var(--color-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
  font-family: inherit;
  background: none;
  cursor: pointer;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-white);
  background: transparent;
}

.wrapper {
  width: 100%;
  max-width: var(--wrapper-max);
  margin: 0 auto;
  padding: 0 var(--wrapper-pad);
}

.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 200;
  background: var(--color-red);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s var(--ease-out);
}

.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

.black-section {
  background: var(--color-surface);
}

.section {
  position: relative;
  padding: clamp(4.5rem, 9vw, 9rem) 0;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 1.25rem;
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.section-head--split {
  display: flex;
  flex-direction: column;
}

.section-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.section-head__body {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 38rem;
  color: var(--color-text-secondary);
}

/* Line-reveal split text: each line wrapped in overflow-hidden span by JS */
.split-lines__line {
  overflow: hidden;
  display: block;
}

.split-lines__line > span {
  display: block;
  will-change: transform;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.9rem 1.75rem;
  transition: transform 0.4s var(--ease-out), background 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}

.btn--sm {
  padding: 0.65rem 1.35rem;
  font-size: 0.875rem;
}

.btn--lg {
  padding: 1.1rem 2.25rem;
  font-size: 1rem;
}

.btn--primary {
  background: var(--color-red);
  color: var(--color-white);
}

.btn--primary:hover {
  background: #ff1a19;
}

.btn--ghost {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-border-strong);
}

.btn--ghost:hover {
  border-color: var(--color-red);
}

.btn__wrap {
  position: relative;
  display: block;
  overflow: hidden;
  height: 1.2em;
}

.btn__text {
  display: block;
  transition: transform 0.45s var(--ease-out);
}

.btn__text--dup {
  position: absolute;
  top: 100%;
  left: 0;
}

.btn:hover .btn__text {
  transform: translateY(-100%);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:disabled .btn__text {
  transform: none;
}

/* =========================================================
   HEADER
   ========================================================= */
.prometeo-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.1rem var(--wrapper-pad);
  transition: background 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
  border-bottom: 1px solid transparent;
}

.prometeo-header.is-scrolled {
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--color-border);
  padding: 0.85rem var(--wrapper-pad);
}

.prometeo-header__content {
  max-width: var(--wrapper-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ---- Brand lockup: official logo + wordmark ----
   Shared by the header and the mobile menu header. The footer uses
   its own markup (prometeo-footer__brand/__monogram below) since it
   shows the larger transparent monogram at a different size, but
   still reuses .brand__wordmark for the text so the type treatment
   never drifts between the two. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand__logo {
  width: 38px;
  height: 38px;
  display: block;
  object-fit: contain;
  border-radius: 8px;
  flex: 0 0 auto;
}

.brand__wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

.brand__wordmark strong {
  font-weight: 700;
  color: var(--color-white);
}

.brand__wordmark span {
  font-weight: 600;
  color: var(--color-text-tertiary);
}

.prometeo-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2rem);
}

.prometeo-header__link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.25s ease;
}

.prometeo-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--color-red);
  transition: width 0.3s var(--ease-out);
}

.prometeo-header__link:hover {
  color: var(--color-white);
}

.prometeo-header__link:hover::after {
  width: 100%;
}

.prometeo-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.prometeo-header__menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
}

.prometeo-header__menu-btn span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--color-white);
  transition: transform 0.35s var(--ease-out), opacity 0.25s ease;
}

.prometeo-header__menu-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.prometeo-header__menu-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.prometeo-header__menu-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--color-black);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2.5rem;
  padding: 2rem var(--wrapper-pad);
  transform: translateY(-100%);
  transition: transform 0.55s var(--ease-out);
  visibility: hidden;
}

.mobile-nav.is-open {
  transform: translateY(0);
  visibility: visible;
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mobile-nav__link {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  font-weight: 700;
  color: var(--color-white);
}

.mobile-nav__cta {
  width: 100%;
  justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
  .mobile-nav {
    transition: transform 0.55s var(--ease-out);
  }
}

/* =========================================================
   HERO
   ========================================================= */
.prometeo-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  padding: 0.5rem;
}

.prometeo-hero__stage {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-black);
}

.prometeo-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.prometeo-hero__poster,
.prometeo-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 45%;
}

.prometeo-hero__video {
  opacity: 0;
  transition: opacity 1s ease;
}

.prometeo-hero__video.is-active {
  opacity: 1;
}

/* Bottom stop deepened from 0.75 → 0.92 ("Actualización 21") so the hero
   settles fully to black right where it meets #sistema's pure #000 below —
   a deliberate "esto es lo que obtienes → esto es el problema" handoff via
   color continuity, without adding any new element or touching #sistema
   itself. */
.prometeo-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 35%, rgba(0, 0, 0, 0.92) 100%);
}

.prometeo-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 100vh;
  padding-top: 8rem;
  padding-bottom: 4rem;
  gap: 1.75rem;
}

.prometeo-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-white);
  max-width: 40rem;
}

.prometeo-hero__desc {
  font-size: clamp(1.05rem, 1.4vw, 1.375rem);
  line-height: 1.5;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.72);
}

/* The official motto — also appears in the manifesto close and the
   footer tagline; kept plain here (no split-lines reveal) so it
   doesn't compete with the split-line title for attention. */
.prometeo-hero__motto {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-red);
}

.prometeo-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.prometeo-hero__capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  width: 100%;
  max-width: 40rem;
}

.prometeo-hero__capabilities span {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .prometeo-hero__content {
    padding-top: 7rem;
    padding-bottom: 2rem;
  }
  .prometeo-hero__actions {
    flex-direction: column;
    width: 100%;
  }
  .prometeo-hero__actions .btn {
    width: 100%;
  }
}

/* ---- Hero product proof ("Actualización 21": Professional Pass V2) ----
   A compact, clearly-labeled "vista operativa" card — the 4th step in the
   hero's reading order (promesa → explicación → CTA → esto), never the
   first thing the eye lands on. Positioned relative to .prometeo-hero__stage
   (not the text wrapper) so it reads as pinned to the framed artwork itself,
   like a HUD corner element, rather than competing with the text column for
   the same horizontal band. Solid surface (no glass/blur) — CLAUDE.md rules
   out glassmorphism, and the panel needs to read clearly over a busy
   photographic background regardless. */
.prometeo-hero__proof {
  position: absolute;
  right: clamp(1.5rem, 3vw, 2.5rem);
  bottom: clamp(1.5rem, 3vw, 2.5rem);
  z-index: 2;
  width: clamp(270px, 23vw, 330px);
  background: rgba(13, 13, 13, 0.92);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
}

.hero-proof__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.hero-proof__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-white);
}

.hero-proof__demo {
  font-size: 0.66rem;
  font-style: italic;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.hero-proof__subtitle {
  margin-top: 0.2rem;
  margin-bottom: 0.9rem;
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
}

.hero-proof__rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.hero-proof__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.hero-proof__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.hero-proof__value {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-white);
  text-align: right;
  white-space: nowrap;
}

/* Same amber "needs attention" tint already used by .status-pill--review /
   .visibility-metric__value--watch — reused, not invented. Red stays
   reserved for the one real exception (the alert row below). */
.hero-proof__value--watch {
  color: #e8c96b;
}

.hero-proof__sparkline {
  width: 100%;
  height: 1.75rem;
  display: block;
  margin-top: 0.9rem;
  overflow: visible;
}

.hero-proof__sparkline polyline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-proof__alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.74rem;
  color: #ffb3b2;
}

.hero-proof__alert-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-red);
  flex-shrink: 0;
}

/* Below ~1100px the text column (max-width 40rem + wrapper padding) and a
   floating 270-330px corner panel no longer have enough clearance on the
   hero's own stage width to avoid overlapping (measured: ~31px of clearance
   left at 1024px, negative below that) — rather than shrinking the panel
   further into illegibility, it drops out of the floating position and
   joins the normal content flow instead, same "Copy → CTA → Preview" order
   requested for mobile. */
@media (max-width: 1100px) {
  .prometeo-hero__proof {
    position: static;
    width: 100%;
    max-width: 26rem;
    margin-top: 0.5rem;
  }
}

@media (max-width: 480px) {
  .prometeo-hero__proof {
    max-width: none;
  }
}

/* =========================================================
   CHAOS → SYSTEM (pinned scroll sequence)
   Cards scattered → pulled into a black hole → dashboard is
   born from its core. See PROMETEO_IMPLEMENTATION.md for the
   phase breakdown driven by assets/js/main.js.
   ========================================================= */
.chaos-system-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  /* Pure black, not --color-surface's #0d0d0d — "Actualización 16" needs
     the section background to match the video's own black exactly so
     there's no visible tonal seam around its edge/mask. */
  background: #000;
  /* Top padding must clear the fixed header for the entire pin duration,
     not just on first paint — this section stays glued to viewport top.
     Trimmed from clamp(6.5rem, 12vw, 8rem) ("Actualización 12") — on
     tall-but-not-huge desktop viewports the heading text plus this
     padding alone could eat enough vertical room that the black hole
     no longer had space for both a clear top boundary and a real
     bottom margin, regardless of where it was positioned. */
  padding: clamp(5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.chaos-system-head {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto;
  position: relative;
}

.chaos-system-head .eyebrow {
  display: inline-block;
}

.chaos-system-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.85rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.chaos-system-body {
  margin-top: 1.1rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

/* Faded in by GSAP once the dashboard is born (initChaosToSystem);
   starts at opacity:0 via JS, so no fallback is needed here beyond
   reduced-motion, which sets it visible directly.
   Taken out of flow ("Actualización 13"): it's invisible for the
   entire reading phase (the exact window the black-hole sizing math
   cares about), yet its margin+height was still pushing .chaos-stage
   down by ~45-58px, stealing usable vertical room from the (untouched)
   sceneCenter/fitScale math and stretching the text-to-hole gap for no
   visible reason. `top: 100%` on the now-`position: relative` head
   measures from the head's own remaining (in-flow) content — i.e.
   right after .chaos-system-body — so this lands at the exact same
   spot it occupied in flow; only the layout space it used to reserve
   is gone. */
.chaos-system-reveal {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-white);
}

.chaos-stage {
  position: relative;
  width: 100%;
  max-width: 68rem;
  /* Reduced further still ("Actualización 13", ~40% off the previous
     clamp(1rem, 2.8vw, 1.9rem)) — the hole should begin visually close
     to the end of the text block, not float in its own separate empty
     region. Tuned against measured paragraph-to-halo gaps (60–100px
     desktop / 45–70px laptop / 30–50px mobile). */
  margin: clamp(0.6rem, 1.7vw, 1.1rem) auto 0;
  /* "Actualización 12": brought back down from clamp(480px, 78vh, 920px).
     That taller ceiling assumed .black-hole-scene needed the *stage* to
     be tall to have room — it doesn't: the wrapper is absolutely
     positioned with its own independent size and a GSAP-computed pixel
     position, so it renders at full size regardless of the stage's own
     box. Meanwhile the taller stage was making .chaos-system-section's
     total content (min-height: 100vh, flex-centered) grow well past one
     viewport height on common desktop sizes, which pushed the actual
     rendered stage position down far enough to break the safe-zone math
     below — the real cause of the hole and cards drifting/overlapping.
     Kept modest and vh-based so short viewports still self-adjust. */
  height: clamp(420px, 58vh, 620px);
}

/* ---- scattered process cards ---- */
.chaos-stage__card {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 3;
}

.chaos-stage__card--lg {
  width: min(250px, 48vw);
}

.chaos-stage__card--md {
  width: min(216px, 42vw);
}

.chaos-stage__card--sm {
  width: min(190px, 38vw);
}

.chaos-stage__card-inner {
  padding: 1.2rem 1.35rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.7);
  animation: chaos-float 6s ease-in-out infinite;
}

.chaos-stage__card:nth-child(2n) .chaos-stage__card-inner {
  animation-duration: 7.2s;
  animation-delay: -2.4s;
}

.chaos-stage__card:nth-child(3n) .chaos-stage__card-inner {
  animation-duration: 5.4s;
  animation-delay: -3.6s;
}

/* Once GSAP starts actually pulling a card toward the core, the CSS
   idle-float has no business still nudging its own transform — it
   never fought GSAP (it lives on the inner wrapper, GSAP owns the
   outer one), but two independent motions on the same card read as
   uncontrolled mid-flight. main.js toggles this by scroll progress,
   not by any timer. */
.chaos-stage.is-converging .chaos-stage__card-inner {
  animation-play-state: paused;
}

@keyframes chaos-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.chaos-stage__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 0.5rem;
}

.chaos-stage__card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* ---- black hole: gravitational processing core ----
   "Actualización 17": after several rounds of an animated
   implementation (WebGL/GLSL shader in Actualizaciones 10-15, then a
   prerendered-video plan in Actualización 16 whose assets never
   actually shipped) not landing on a result that read correctly, this
   settled on a single static, pre-processed PNG — no JS lifecycle, no
   playback, no per-frame animation loop of any kind. The wrapper only
   handles size/position; GSAP still scales/fades *this* element
   exactly as before, and initChaosToSystem still computes one single
   sceneCenter in pixels applied via GSAP x/y (xPercent/yPercent:-50
   for centering) — the same mechanism used for every card, untouched
   by this swap.
   assets/img/black-hole-static.png is a cropped, horizontal-aspect
   (736×470) derivative of black-hole-reference.png with *real* alpha
   transparency (luminance-extracted, organic-feathered edges, distant
   background stars suppressed) — not a CSS mask trick, so no
   mask-image here at all. Width drives sizing; height follows via
   aspect-ratio, so only one clamp is needed per breakpoint instead of
   two matching width/height values. */
.black-hole-static {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(560px, 32vw, 640px);
  aspect-ratio: 736 / 470;
  z-index: 1;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}

.black-hole-static img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
}

/* ---- "Actualización 18": ambient glow + particle layers ----
   Both are children of the same wrapper GSAP already positions at
   sceneCenter — nothing here touches position/size/x/y of the wrapper
   itself, they just inherit its box. DOM order alone puts them in the
   right stack (canvas first = furthest back, glow second, image last =
   frontmost) — no z-index needed between them. Explicitly NOT: a solid
   black circle, a dark vignette, a visible circular mask, or an opaque
   canvas background — every layer here is transparent except the warm,
   irregular glow gradient itself. */
.black-hole-static__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  /* Canvas has no implicit background — stays fully transparent so only
     the drawn particles show, never a filled rectangle. */
}

.black-hole-static__glow {
  position: absolute;
  inset: 14% 10%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(245, 4, 3, 0.22) 0%,
    rgba(255, 83, 0, 0.13) 28%,
    rgba(255, 180, 40, 0.05) 48%,
    transparent 72%
  );
  filter: blur(26px);
  opacity: 0.7;
  pointer-events: none;
  will-change: opacity, transform;
}

@media (max-width: 1439px) {
  .black-hole-static {
    width: clamp(480px, 38vw, 560px);
  }
}

@media (max-width: 900px) {
  .black-hole-static {
    width: clamp(380px, 46vw, 460px);
  }
}

@media (max-width: 640px) {
  /* Tall-but-narrow phones (390×844 and similar) were never covered by
     the max-height compact rule further down (844 > 820, so it never
     triggers) — yet the multi-line heading at this width alone could
     run to ~380px tall, leaving too little of the viewport for 3 rows
     of cards to fit without overlapping. Compact the same way the
     short-viewport rule does, just keyed on width instead of height. */
  .chaos-system-section {
    padding-top: clamp(4.5rem, 18vw, 6rem);
  }
  .chaos-system-title {
    font-size: clamp(1.4rem, 6.5vw, 1.7rem);
  }
  .chaos-system-body {
    margin-top: 0.6rem;
    font-size: 0.9rem;
  }
  .chaos-system-reveal {
    margin-top: 0.85rem;
    font-size: 0.92rem;
  }
  .chaos-stage {
    height: clamp(400px, 82vh, 700px);
    margin-top: clamp(0.5rem, 2.1vw, 0.9rem);
  }
  /* Two columns must both fit inside the safe zone (viewport minus
     60px side margins) without touching — at a 360-430px viewport
     that only leaves ~120-140px per column, so cards need to be
     narrower here than on tablet/desktop, not just visually smaller. */
  .chaos-stage__card--lg,
  .chaos-stage__card--md,
  .chaos-stage__card--sm {
    width: min(122px, 32vw);
  }
  .chaos-stage__card-inner {
    padding: 0.7rem 0.75rem;
  }
  .chaos-stage__card-inner p {
    font-size: 0.72rem;
    line-height: 1.42;
  }
  .black-hole-static {
    width: clamp(270px, 78vw, 330px);
  }
}

/* Shorter viewports (typical laptop screens, 800-900px tall) have the
   same width budget as desktop but far less height to work with —
   the intro text block above the stage was eating enough of that
   budget that two full rows of cards no longer fit above the
   required bottom margin. Compact the text block and stage margins
   here instead of touching the card grid logic itself. Also cap the
   black hole itself directly by viewport height (not just width) —
   at this height range it, not the width tier, is what's actually
   scarce, and this rule is placed after every width-tier rule above so
   it always wins the cascade when both match.
   Raised from 820px to 940px ("Actualización 12") — a common
   1440×900 laptop viewport, with the full desktop-sized heading text,
   left too little usable height for the black hole's real bottom
   margin and a 3-row card layout at the same time; this range now
   gets the same compaction a shorter viewport already got. */
@media (max-height: 940px) and (min-width: 641px) {
  .black-hole-static {
    width: clamp(480px, 58vh, 560px);
  }
  .chaos-system-section {
    padding-top: clamp(4.5rem, 8vw, 6rem);
  }
  .chaos-system-title {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  }
  .chaos-system-body {
    margin-top: 0.65rem;
    font-size: 0.95rem;
  }
  .chaos-stage {
    margin-top: clamp(0.6rem, 1.4vw, 0.95rem);
  }
}

/* Wide desktop viewports with only moderate height (1920×1080 and
   similar 16:9 monitors) fall outside the bracket above — 1080px is
   plenty tall by most standards, but still not tall enough for the
   desktop tier's full 920px-wide hole once the sceneCenter clamp
   (fixed 68%/32% split, not rewritten here) has to keep it above the
   required bottom margin: with the naked radius that big, the clamp
   pushes the center up far enough that the hole's own top edge bleeds
   past the stage into the paragraph above. Sized narrower here, by
   height, so that clamp never has to reach that far in the first
   place — same fix as the bracket above, just tuned for a viewport
   that has more headroom to spare than a 900px-tall laptop but still
   not enough for the un-compacted desktop size. */
@media (min-width: 1440px) and (min-height: 941px) and (max-height: 1150px) {
  .black-hole-static {
    width: clamp(560px, 54vh, 640px);
  }
  /* Same text compaction the 940px-tall bracket above already uses —
     the bigger "Actualización 14" wrapper needs it here too, since the
     hard ceiling on how big the hole can get without bleeding into the
     paragraph is set by paraBottom's own position, not by anything the
     stage-offset/gap side can trade against (verified: shuffling space
     between the stage's own margin and its offset from the text nets to
     zero on the resulting gap — only shrinking the text block itself
     actually raises the ceiling). */
  .chaos-system-section {
    padding-top: clamp(4.5rem, 8vw, 6rem);
  }
  .chaos-system-title {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  }
  .chaos-system-body {
    margin-top: 0.65rem;
    font-size: 0.95rem;
  }
  /* The text compaction above shrinks stageOffsetTop enough that the
     stage's own 620px height cap (tuned in Actualización 12 for a
     smaller hole) becomes the binding limit on usableHeight well before
     the actual viewport margin would be — raised here so the bigger
     Actualización 14 hole gets the vertical room that's genuinely
     available at this width/height combination. */
  .chaos-stage {
    height: clamp(420px, 64vh, 700px);
  }
}

/* =========================================================
   SYSTEM / DASHBOARD MOCK
   ========================================================= */
.dashboard-mock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 0 1.5rem;
}

.dashboard-mock__frame--desktop {
  width: min(100%, 46rem);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.dashboard-mock__topbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
}

.dashboard-mock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.dashboard-mock__topbar-title {
  margin-left: 0.75rem;
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
}

.dashboard-mock__body {
  display: grid;
  grid-template-columns: 11rem 1fr;
}

.dashboard-mock__side {
  padding: 1.1rem 0.75rem;
  border-right: 1px solid var(--color-border);
}

.dashboard-mock__side-item {
  font-size: 0.78rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
}

.dashboard-mock__side-item--active {
  background: rgba(245, 4, 3, 0.12);
  color: var(--color-white);
}

.dashboard-mock__main {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dashboard-mock__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.dashboard-mock__row:last-child {
  border-bottom: 0;
}

.dashboard-mock__row p {
  color: var(--color-text-secondary);
}

.dashboard-mock__time {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill--live {
  background: rgba(245, 4, 3, 0.14);
  color: #ff6a69;
}

.status-pill--review {
  background: rgba(255, 255, 255, 0.1);
  color: #e8c96b;
}

.status-pill--done {
  background: rgba(255, 255, 255, 0.08);
  color: #7fd88f;
}

.dashboard-mock__frame--mobile {
  width: 13rem;
  flex-shrink: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 1.5rem;
  padding: 1rem 0.9rem;
}

.dashboard-mock__mobile-notch {
  width: 40%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 auto 0.85rem;
}

.dashboard-mock__mobile-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.75rem;
}

.dashboard-mock__mobile-row {
  padding: 0.6rem 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
}

.dashboard-mock__mobile-row p {
  margin-top: 0.4rem;
  color: var(--color-text-secondary);
}

@media (max-width: 900px) {
  .dashboard-mock {
    flex-direction: column;
    align-items: stretch;
  }
  .dashboard-mock__frame--mobile {
    display: none;
  }
  .dashboard-mock__body {
    grid-template-columns: 1fr;
  }
  .dashboard-mock__side {
    display: none;
  }
}

/* =========================================================
   ACCORDION (Agentes + FAQ)
   ========================================================= */
.agent-item,
.faq-item {
  border-top: 1px solid var(--color-border);
}

.agent-item:last-child,
.faq-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.agent-item__header,
.faq-item__header {
  width: 100%;
  display: grid;
  align-items: center;
  gap: 1.25rem;
  padding: 1.75rem 0;
  text-align: left;
}

.agent-item__header {
  grid-template-columns: 3.5rem 1fr 1fr auto;
}

.faq-item__header {
  grid-template-columns: 1fr auto;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 600;
  color: var(--color-white);
}

.agent-item__number {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-text-tertiary);
}

.agent-item__name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--color-white);
}

.agent-item__result {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.agent-item__icon,
.faq-item__icon {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.agent-item__icon::before,
.agent-item__icon::after,
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-white);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease-out);
}

.agent-item__icon::before,
.faq-item__icon::before {
  width: 100%;
  height: 1.5px;
}

.agent-item__icon::after,
.faq-item__icon::after {
  width: 1.5px;
  height: 100%;
}

.is-open .agent-item__icon::after,
.is-open .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

.agent-item__panel,
.faq-item__panel {
  overflow: hidden;
}

.agent-item__panel-inner,
.faq-item__panel-inner {
  padding-bottom: 2rem;
}

.agent-item__desc {
  max-width: 40rem;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.agent-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.agent-item__tags span {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
}

.agent-decision-log {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-red);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  max-width: 34rem;
}

.agent-decision-log__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 0.6rem;
}

.agent-decision-log__entry {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.4rem;
}

.agent-decision-log__entry strong {
  color: var(--color-white);
  font-weight: 600;
}

.faq-item__panel-inner p {
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .agent-item__header {
    grid-template-columns: 2.5rem 1fr auto;
  }
  .agent-item__result {
    display: none;
  }
}

/* =========================================================
   HOW IT WORKS — capítulo claro ("Actualización 24": Professional Pass V5,
   Editorial Rhythm). Antes: 5 columnas iguales (numeral + heading + body),
   la misma receta compositiva que Diferenciadores — el "valle visual"
   identificado en PROMETEO_CREATIVE_DIRECTION_V2.md §3. Ahora: secuencia
   editorial vertical sobre Paper, con un raíl rojo que se dibuja por scroll
   (mismo mecanismo `initHowItWorksLine`, solo reorientado) en vez de una
   grid de tarjetas. Mismo copy de siempre — ningún paso se reescribió.
   ========================================================= */
.how-it-works-section {
  overflow: hidden;
  position: relative;
}

.how-it-works-section--light {
  --hiw-ink-secondary: #4a4642; /* Ebony sólido — ~7.2:1 sobre Paper, verificado */
  --hiw-border: rgba(19, 18, 16, 0.14);
  background: var(--color-paper);
  color: var(--color-ebony);
  /* Ritmo: más aire que el resto del sitio — marca el capítulo como una
     pausa deliberada, no otra sección más del mismo largo. */
  padding: clamp(6rem, 11vw, 10rem) 0;
  /* `body` fija font-smoothing:antialiased pensado para texto claro sobre
     fondo oscuro — sobre Paper con tinta oscura produce un ligero efecto
     "fantasma" en el peso de la fuente. Solo este capítulo claro necesita
     el smoothing estándar del sistema operativo. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* Atmospheric Fade — suaviza el corte de fondo negro→Paper al entrar y el
   regreso Paper→negro al salir hacia Casos de uso. Función: evitar un corte
   seco entre secciones (pedido explícito), no decoración. */
.how-it-works-section--light::before,
.how-it-works-section--light::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(3rem, 8vw, 6rem);
  pointer-events: none;
  z-index: 0;
}

.how-it-works-section--light::before {
  top: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent);
}

.how-it-works-section--light::after {
  bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
}

/* Continuity thread — mismo motivo ya usado en Confianza/Visibilidad
   (transparente → rojo), aquí marcando la entrada al capítulo claro: el
   único elemento Prometeo Red que anuncia la transición, sin usar Kinetic
   Red como protagonista (fuera de alcance, ver P4 en
   PROMETEO_CREATIVE_DIRECTION_V2.md). */
.how-it-works-thread {
  position: relative;
  z-index: 1;
  width: 1px;
  height: 2.75rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(180deg, transparent, var(--color-red) 75%);
}

.how-it-works-section--light .eyebrow {
  /* Rojo puro sobre Paper mide ~3.3:1 — falla AA para texto normal. El
     acento rojo de la sección vive en el raíl/hilo, no en este texto. */
  color: var(--color-ebony);
}

.how-it-works-section--light .section-head__title {
  color: var(--color-ebony);
}

.how-it-works-section--light .section-head__body {
  color: var(--hiw-ink-secondary);
}

.how-it-works {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* Deja un gutter a la izquierda para que el raíl (.how-it-works__line)
     quede visible como una columna propia, no pegado al numeral. */
  padding-left: clamp(2.5rem, 6vw, 4rem);
}

.how-it-works__step {
  position: relative;
  display: grid;
  grid-template-columns: clamp(3rem, 7vw, 5.5rem) 1fr;
  gap: 0.5rem clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--hiw-border);
}

.how-it-works__step:first-child {
  border-top: none;
  padding-top: 0.5rem;
}

/* Alternancia editorial: los pasos pares se desplazan levemente a la
   derecha — rompe la simetría de columnas iguales sin reordenar el DOM ni
   forzar texto centrado/derecho (la lectura del párrafo sigue siempre
   alineada a la izquierda). */
.how-it-works__step:nth-child(even) {
  margin-left: clamp(0px, 6vw, 4rem);
}

.how-it-works__number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ebony);
  opacity: 0.88;
}

.how-it-works__copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 700;
  color: var(--color-ebony);
}

.how-it-works__copy p {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 30rem;
  color: var(--hiw-ink-secondary);
}

/* Raíl vertical — mismo mecanismo de dibujo por scroll que ya existía
   (initHowItWorksLine en main.js, sin cambios de JS), solo reorientado de
   horizontal a vertical. */
.how-it-works__line {
  position: absolute;
  top: 0;
  left: clamp(0.75rem, 2.5vw, 1.5rem);
  display: block;
  width: 2px;
  height: 100%;
  z-index: 0;
}

.how-it-works__line line {
  stroke: var(--color-red);
  stroke-width: 2;
}

@media (max-width: 640px) {
  .how-it-works__step {
    grid-template-columns: 3.5rem 1fr;
  }
  .how-it-works__step:nth-child(even) {
    margin-left: 0;
  }
  .how-it-works__step:nth-child(even) .how-it-works__number {
    text-align: right;
  }
}

/* =========================================================
   USE CASES
   ========================================================= */
.use-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.use-case-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.4s var(--ease-out), border-color 0.4s ease;
}

.use-case-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-border-strong);
}

.use-case-card__tag {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-red);
}

.use-case-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-white);
}

.use-case-card__mock {
  min-height: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
}

.use-case-card__desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.chat-bubble {
  max-width: 85%;
  padding: 0.6rem 0.9rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

.chat-bubble--in {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 0.25rem;
  color: var(--color-text-secondary);
}

.chat-bubble--out {
  align-self: flex-end;
  background: rgba(245, 4, 3, 0.16);
  border-bottom-right-radius: 0.25rem;
  color: rgba(255, 255, 255, 0.88);
}

.mini-alert {
  font-size: 0.8rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-secondary);
  border-left: 2px solid var(--color-border-strong);
}

.mini-alert--warn {
  border-left-color: var(--color-red);
  color: #ffb3b2;
  background: rgba(245, 4, 3, 0.1);
}

.mini-alert--done {
  border-left-color: #7fd88f;
  color: #b7e8bf;
  background: rgba(127, 216, 143, 0.08);
}

.mini-report {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.mini-report strong {
  font-family: var(--font-display);
  color: var(--color-white);
  font-size: 1.1rem;
}

@media (max-width: 1024px) {
  .use-cases {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .use-cases {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   DIFFERENTIATORS — composición asimétrica ("Actualización 24":
   Professional Pass V5). Antes: grid de 5 columnas iguales, la misma
   receta que #como-funciona. Ahora: un diferenciador a escala mayor (el
   pilar más repetido del copy del sitio — "todo en un solo lugar") +
   el resto como lista compacta dividida por líneas, sin tarjetas/bordes.
   ========================================================= */
.differentiators-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.differentiator__index {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-red);
  margin-bottom: 0.75rem;
}

.differentiator h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.5rem;
}

.differentiator p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* La idea dominante: mismo contenido, escala tipográfica mayor y su propio
   bloque a la izquierda — no una cuarta columna más, un ancla visual. */
.differentiator--lead .differentiator__index {
  font-size: 0.95rem;
}

.differentiator--lead h3 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  letter-spacing: -0.01em;
}

.differentiator--lead p {
  font-size: 1.05rem;
  max-width: 26rem;
}

/* La lista: filas compactas divididas por línea, nunca tarjetas — mismo
   principio "anti-card" que ya usa .trust-signal. */
.differentiators-list .differentiator {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.25rem 1.25rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--color-border);
}

.differentiators-list .differentiator:first-child {
  border-top: none;
  padding-top: 0;
}

.differentiators-list .differentiator__index {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.differentiators-list .differentiator h3,
.differentiators-list .differentiator p {
  grid-column: 2;
}

.differentiators-list .differentiator h3 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.differentiators-list .differentiator p {
  font-size: 0.875rem;
}

@media (max-width: 900px) {
  .differentiators-layout {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   VISIBILITY — "Estado del negocio" panel ("Actualización 20":
   Professional Pass V1). Editorial two-column composition — intro copy +
   a single demonstrative overview panel — replacing the previous 8-card
   "?" grid entirely. No card grid here on purpose: this section exists
   specifically to stop repeating the card-chrome used by
   .use-case-card/.package-card elsewhere on the page.
   ========================================================= */
.visibility-section {
  overflow: hidden;
}

/* Continuity marker from the previous section — narrative thread, not a
   decorative floater: a short line that "keeps going" into this section
   instead of hard-cutting from Diferenciadores. Uses the existing
   [data-reveal] fade/translate mechanism, nothing new to wire up. */
.visibility-thread {
  width: 1px;
  height: 2.75rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  background: linear-gradient(180deg, transparent, var(--color-red) 75%);
}

.visibility-layout {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.visibility-intro__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.visibility-intro__body {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 30rem;
  color: var(--color-text-secondary);
}

.visibility-intro__close {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-red);
}

.visibility-panel__frame {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.visibility-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.visibility-panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-white);
}

.visibility-panel__demo {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-text-tertiary);
}

.visibility-panel__metrics {
  display: flex;
  flex-direction: column;
}

/* Rows, not cards — the panel is one bordered surface; each metric is a
   divided row inside it, never its own boxed card. This is what keeps the
   section from becoming "8 cards" again with fewer, prettier cards. */
.visibility-metric {
  position: relative;
  padding: 0.9rem 0 0.9rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
  transition: transform 0.3s var(--ease-out);
}

.visibility-metric:last-child {
  border-bottom: 0;
}

/* Reuses the same "red left border = emphasis" motif already established
   by .agent-decision-log elsewhere, instead of inventing a new highlight
   language just for this panel. */
.visibility-metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 2px;
  background: var(--color-red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s var(--ease-out);
}

.visibility-metric__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.visibility-metric__label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: color 0.25s ease;
}

.visibility-metric__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-white);
  white-space: nowrap;
}

/* Positive/attention tints reuse the exact status colors already defined
   for .status-pill/.mini-alert elsewhere (#7fd88f / #e8c96b) rather than
   introducing new hues — red stays reserved for the one real exception
   below (inventory alert), never used to color a "good news" metric. */
.visibility-metric__value--up {
  color: #7fd88f;
}

.visibility-metric__value--watch {
  color: #e8c96b;
}

.visibility-metric__hint {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
}

/* Hover is an enhancement only — the hint line is always visible (not
   hover-gated) so mobile/touch never depends on it for information. */
@media (hover: hover) and (pointer: fine) {
  .visibility-metric:hover {
    transform: translateY(-2px);
  }
  .visibility-metric:hover .visibility-metric__label {
    color: var(--color-white);
  }
  .visibility-metric:hover::before {
    transform: scaleY(1);
  }
}

.visibility-panel__activity {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.visibility-panel__activity-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 0.85rem;
}

.visibility-panel__spark-wrap {
  position: relative;
}

.visibility-panel__sparkline {
  width: 100%;
  height: 3rem;
  display: block;
  overflow: visible;
}

.visibility-panel__sparkline polyline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Marks "now" on the line — the one accent on an otherwise neutral
   sparkline, same "red = current/priority" logic as the alert below. */
.visibility-panel__spark-dot {
  position: absolute;
  right: 0;
  top: 18%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
  transform: translate(50%, -50%);
  opacity: 0;
}

.visibility-panel__alert {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(245, 4, 3, 0.1);
  border-left: 2px solid var(--color-red);
  color: #ffb3b2;
  font-size: 0.88rem;
}

.visibility-panel__alert-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .visibility-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 640px) {
  .visibility-panel__frame {
    padding: 1.35rem;
  }
  .visibility-metric__label {
    font-size: 0.88rem;
  }
  .visibility-metric__value {
    font-size: 1.05rem;
  }
}

/* =========================================================
   MANIFESTO
   ========================================================= */
.manifesto-section {
  position: relative;
  padding: clamp(6rem, 14vw, 11rem) 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 70vh;
}

.manifesto-section__bg {
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/hero-poster.jpg");
  background-size: cover;
  background-position: 65% 40%;
  will-change: transform;
  transform: scale(1.15);
}

.manifesto-section__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.85));
}

.manifesto-section__content {
  position: relative;
  z-index: 1;
}

.manifesto-section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.25;
  color: var(--color-white);
  max-width: 42rem;
}

.manifesto-section__body {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.7);
}

.manifesto-section__close {
  margin-top: 3rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--color-red);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.manifesto-section__footnote {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
}

/* =========================================================
   TRUST / CONFIANZA ("Actualización 22": Professional Pass V3)
   Editorial composition on purpose — text+process pair up top, then a
   2-column label/explanation list (not cards), then a quiet human/contact
   closing strip. No new JS: every reveal here reuses the existing
   [data-reveal]/[data-split-lines] mechanism already used sitewide, so the
   4 signal rows stagger in naturally as the page scrolls past them instead
   of needing a bespoke timeline — deliberately "almost static", per brief.
   ========================================================= */
.trust-section {
  overflow: hidden;
}

/* Same continuity-thread motif already used entering Visibilidad
   ("Actualización 20") — reused, not reinvented. */
.trust-thread {
  width: 1px;
  height: 2.75rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  background: linear-gradient(180deg, transparent, var(--color-red) 75%);
}

.trust-intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.trust-intro__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.trust-intro__body {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 34rem;
  color: var(--color-text-secondary);
}

/* A single bordered surface, not a repeated card — legitimate per
   art-direction guidance (groups genuinely distinct steps, isn't a default
   paragraph container), and deliberately different in shape from the
   #como-funciona numbered-column layout it sits near in the page (vertical
   timeline vs. horizontal columns) so the two don't read as the same
   section twice. */
.trust-process {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  padding: 1.5rem 1.75rem;
}

.trust-process__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.trust-process__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 1.1rem;
  padding-left: 1.4rem;
}

.trust-process__steps::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 1px;
  background: var(--color-border-strong);
}

.trust-process__steps li {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-white);
}

.trust-process__steps li::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: 0.4rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-red);
}

/* Signals: a 2-column label/explanation list divided by rules — the
   "texto principal / evidencia" + "señal / explicación" layout requested,
   deliberately not a grid of 4 identical cards. */
.trust-signals {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--color-border);
}

.trust-signal {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr;
  gap: 0.75rem 3rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}

.trust-signal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-white);
}

.trust-signal__body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 36rem;
}

.trust-human {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 2.5rem;
}

.trust-human__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-white);
}

.trust-human__body {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 30rem;
  color: var(--color-text-secondary);
}

.trust-human__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* display/padding here (not just color/font) so the tap target clears the
   WCAG 24px minimum without changing how the text looks — same pattern
   already used by .prometeo-footer__social-link below. */
.trust-human__link {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  transition: color 0.25s ease;
}

.trust-human__link:hover,
.trust-human__link:focus-visible {
  color: var(--color-red);
}

/* Human Trust Signal ("Actualización 25") — fotografía real integrada como
   pieza editorial, no como avatar/card de perfil. La franja roja vive en el
   borde del marco, nunca sobre la fotografía; funciona igual sin ella (el
   crop + blanco y negro + desplazamiento ya comunican "editorial" por sí
   solos). Overrides el `.trust-human` base (flex) con una grid de 2
   columnas — mismo bloque de contenido, sin reescribir el copy.

   Una sola fila (no 2): texto+links viven juntos dentro de
   `.trust-human__content`, para que mantengan su espaciado natural y
   compacto en vez de separarse por la altura de la foto (si se dividían en
   dos filas de grid, la foto — más alta que el texto — empujaba la fila de
   links hacia abajo dejando un hueco vacío entre ambas). La foto, al ser
   más alta que el bloque de texto+links, simplemente se extiende más abajo
   en su propia columna — negativo space esperado, no un hueco accidental. */
.trust-human--photo {
  display: grid;
  grid-template-columns: 1fr clamp(11rem, 26vw, 22rem);
  align-items: start;
  gap: 1.5rem 2.5rem;
}

.trust-human__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.trust-human__photo {
  align-self: start;
  margin: 0;
  /* Único acento Prometeo Red permitido en esta pieza — mismo motivo de
     borde izquierdo ya usado en `.agent-decision-log`/hover de Visibilidad,
     nunca sobre la cara. */
  border-left: 2px solid var(--color-red);
  padding-left: 1rem;
}

.trust-human__photo img {
  display: block;
  width: 100%;
  /* El recorte editorial (menos aire de estudio sobre la cabeza, corte
     limpio bajo el pecho) ya vive en el propio archivo — `height:auto`
     basta, sin `aspect-ratio`/`object-fit` (esa combinación dentro de un
     grid-item con span de filas producía un bug real de sizing en
     Chromium: la figura terminaba estirándose a la altura completa de la
     sección — encontrado y corregido durante el QA de esta tarea). */
  height: auto;
  /* Blanco y negro + contraste moderado — sin blur, sin suavizado, sin
     alterar facciones. La imagen sigue siendo la fotografía real, solo
     tratada tonalmente. */
  filter: grayscale(1) contrast(1.08);
  border-radius: 0;
}

.trust-human__caption {
  margin-top: 0.65rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.trust-human__caption span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

@media (max-width: 900px) {
  .trust-intro {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .trust-human--photo {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Orden pedido explícitamente: texto → foto compacta → cierre/contacto.
     `display:contents` disuelve `.trust-human__content` (mismo patrón ya
     usado en `.contact-form__step`, "Actualización 7") para poder reordenar
     texto/foto/links de forma independiente solo en este breakpoint, sin
     tocar el orden real del DOM (accesible por teclado/lector de pantalla
     igual que antes). */
  .trust-human__content {
    display: contents;
  }

  .trust-human__text {
    order: 1;
  }

  /* "Foto compacta", nunca pantalla completa — pedido explícito. */
  .trust-human__photo {
    order: 2;
    max-width: 11rem;
  }

  .trust-human__links {
    order: 3;
    align-self: start;
  }
}

@media (max-width: 640px) {
  .trust-signal {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.5rem 0;
  }
  .trust-human {
    align-items: flex-start;
  }
  /* "Launch QA": measured 20px tall on real mobile viewports (390px) —
     below the WCAG 2.5.8 24px minimum. Same invisible-padding fix as the
     footer link groups. */
  .trust-human__link {
    min-height: 44px;
  }
}

/* =========================================================
   PACKAGES ("Actualización 23": Professional Pass V4 — arquitectura
   comercial). Three levels of control (ver → actuar → integrar), not three
   identical pricing cards: Visión is quiet (no fill, faint border), Control
   is the visually dominant tier (red border, static lift, the only list
   with red bullets), Sistema Total is restrained/premium (solid black,
   generous spacing, no badge). Red stays meaningful — reserved for
   Control's own signals (border, badge, bullets) and each card's single
   "resultado" line, never spread evenly across all three as decoration.
   ========================================================= */
.packages-progression {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.packages-progression__step {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.packages-progression__verb {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red);
}

.packages-progression__name {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.packages-progression__step:not(:last-child)::after {
  content: "→";
  margin-left: 0.75rem;
  color: var(--color-text-tertiary);
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 1rem;
}

.package-card {
  position: relative;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: transform 0.4s var(--ease-out), border-color 0.4s ease;
}

/* Hover stays deliberately quiet in this redesign — max 2px, never the
   larger -6px lift used elsewhere on the page (use-case/differentiator
   cards); packages are a decision moment, not a hover-to-discover one. */
.package-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}

.package-card__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-white);
}

.package-card__result {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-red);
}

.package-card__section {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.package-card__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.package-card__text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.package-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.25rem 0;
  flex: 1;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.package-card__features li {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.4;
}

/* Neutral by default — red bullets are Control's signal alone (below),
   not a decoration repeated on every card. */
.package-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.package-card__pricing {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* Holds a modality string today (e.g. "Proyecto inicial"); accepts a real
   price string later (e.g. "Desde Bs 1.490") as a content-only change — no
   selector here assumes one or the other. */
.package-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-white);
}

.package-card__cta {
  margin-top: 0.25rem;
  width: 100%;
}

/* ---- Visión: quiet entry tier — no fill, faint border ---- */
.package-card--vision {
  background: transparent;
  border-color: var(--color-border);
}

/* ---- Control: the visually dominant tier — red border, statically
   raised above its siblings on desktop (classic "featured plan" cue),
   the only card with a badge and the only feature list with red bullets.
   Not a solid red card: background stays the same dark surface with only
   an 8% red tint, per "el rojo debe marcar recomendado/CTA/estados, no
   rellenar la tarjeta". ---- */
.package-card--control {
  border-color: var(--color-red);
  background: linear-gradient(180deg, rgba(245, 4, 3, 0.08), var(--color-surface-2) 40%);
}

.package-card--control .package-card__features li::before {
  background: var(--color-red);
}

.package-card--control:hover {
  border-color: var(--color-red);
}

@media (min-width: 901px) {
  .package-card--control {
    transform: translateY(-0.75rem);
    padding: 2.25rem 2rem;
  }
  .package-card--control:hover {
    transform: translateY(calc(-0.75rem - 2px));
  }
}

.package-card__badge {
  position: absolute;
  top: -0.75rem;
  left: 1.75rem;
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
}

/* ---- Sistema Total: restrained/premium — solid black (not the
   surface-2 the other two share), no badge, a little more internal
   breathing room. Premium via restraint, not black+gold/glow. ---- */
.package-card--total {
  background: var(--color-black);
  gap: 1.3rem;
}

.package-card--total .package-card__name {
  letter-spacing: 0.01em;
}

.packages-section__disclaimer {
  max-width: 42rem;
  margin: 2.5rem auto 0;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-tertiary);
}

@media (max-width: 900px) {
  .packages-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .packages-progression {
    justify-content: flex-start;
    gap: 0.5rem 0.9rem;
  }
  /* Compact, not hidden — same information for everyone, just a smaller
     typographic footprint so three packages don't turn into an endless
     mobile scroll. "Ideal para" stays full-size (it's what visitors scan
     to self-select); "Qué cambia" is the one that tightens. */
  .package-card {
    padding: 1.5rem 1.35rem;
    gap: 0.85rem;
  }
  .package-card__section--secondary .package-card__text {
    font-size: 0.85rem;
    line-height: 1.45;
  }
  .package-card__features {
    gap: 0.45rem;
  }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-section__wrapper {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4rem;
}

.contact-section__feature {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.contact-section__feature h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.4rem;
}

.contact-section__feature p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-content: start;
}

.contact-form__status {
  grid-column: 1 / -1;
  min-height: 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.contact-form__status[data-state="success"] {
  color: #7fd88f;
}

.contact-form__status[data-state="error"] {
  color: var(--color-red);
}

.contact-form__step {
  display: contents;
}

.contact-form__step[hidden] {
  display: none;
}

.contact-form__step-label {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.contact-form__step-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.contact-form__step-actions .contact-form__submit {
  flex: 1;
  margin-top: 0;
}

.contact-form__back {
  flex-shrink: 0;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-form__field--full {
  grid-column: 1 / -1;
}

.contact-form__field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  background: var(--color-surface-2);
  transition: border-color 0.25s ease;
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 3.5rem;
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  border-color: var(--color-red);
}

.contact-form__field[data-invalid="true"] input,
.contact-form__field[data-invalid="true"] select,
.contact-form__field[data-invalid="true"] textarea {
  border-color: var(--color-red);
}

.contact-form__error {
  min-height: 1rem;
  font-size: 0.78rem;
  color: var(--color-red);
}

.form-field__hint {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  font-style: italic;
}

.form-field__hint[hidden] {
  display: none;
}

.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact-form__submit {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0.5rem;
}

.contact-form__disclaimer {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
}

/* "Pre-Launch Final": enlace a /privacidad.html añadido al microcopy del
   disclaimer — mismo lenguaje de subrayado + hover rojo ya usado en otros
   enlaces de texto del sitio (.trust-human__link, footer). */
.contact-form__disclaimer a {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.contact-form__disclaimer a:hover,
.contact-form__disclaimer a:focus-visible {
  color: var(--color-red);
}

@media (max-width: 900px) {
  .contact-section__wrapper {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 560px) {
  .contact-form {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   FOOTER
   ========================================================= */
.prometeo-footer {
  padding: 4rem 0 2rem;
}

.prometeo-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--color-border);
}

.prometeo-footer__tagline {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-text-secondary);
}

/* Footer uses the larger transparent monogram instead of the small
   header lockup — it already reads on the dark surface with no
   background box needed. */
.prometeo-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  flex-shrink: 0;
}

.prometeo-footer__monogram {
  width: clamp(80px, 9vw, 110px);
  height: auto;
  display: block;
  object-fit: contain;
}

.prometeo-footer__grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 3rem 0;
  border-bottom: 1px solid var(--color-border);
}

.prometeo-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
}

.prometeo-footer__nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  transition: color 0.25s ease;
}

.prometeo-footer__nav a:hover {
  color: var(--color-white);
}

.prometeo-footer__contact p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.35rem;
}

/* Scoped to the plain email line specifically (not `.prometeo-footer__
   contact a` generally) so it can't out-specificity the social row's
   own link color below — that link also lives inside this container. */
.prometeo-footer__contact > p > a {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0;
  color: inherit;
  transition: color 0.25s ease;
}

.prometeo-footer__contact > p > a:hover,
.prometeo-footer__contact > p > a:focus-visible {
  color: var(--color-white);
}

/* ---- "Actualización 19": Instagram / Facebook / correo ----
   Discreet row, not a separate footer section — sits with the rest of
   the contact column. Wraps to multiple lines on narrow viewports
   (flex-wrap) and the email label uses overflow-wrap so a long address
   never forces horizontal scroll on mobile. */
.prometeo-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 0.85rem;
}

.prometeo-footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.3rem 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.prometeo-footer__social-link:hover {
  color: var(--color-red);
  transform: translateY(-2px);
}

.prometeo-footer__social-link:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 4px;
  border-radius: 4px;
}

.prometeo-footer__social-link svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .prometeo-footer__social-link {
    /* Comfortable tap target on touch screens without changing the
       visual size of the icon/label. */
    min-height: 44px;
  }
  /* "Launch QA": these three link groups measured 17-22px tall on real
     mobile viewports (390px) — below the WCAG 2.5.8 24px minimum. Same
     fix as .prometeo-footer__social-link above: invisible padding grows
     the tap target, nothing about how the text looks changes. */
  .prometeo-footer__nav a,
  .prometeo-footer__contact > p > a,
  .prometeo-footer__legal-links a {
    min-height: 44px;
  }
}

.prometeo-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 2rem;
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
}

.prometeo-footer__legal-links {
  display: flex;
  gap: 1.5rem;
}

.prometeo-footer__legal-links a {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0;
}

.prometeo-footer__legal-links a:hover {
  color: var(--color-white);
}

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 80;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  color: var(--color-white);
  font-size: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =========================================================
   RESPONSIVE — HEADER NAV COLLAPSE
   ========================================================= */
@media (max-width: 900px) {
  .prometeo-header__nav {
    display: none;
  }
  .prometeo-header__actions .btn {
    display: none;
  }
  .prometeo-header__menu-btn {
    display: flex;
  }
}

/* Logo never compresses (flex-shrink:0 on .brand/.brand__logo handles
   that structurally); on narrow phones the wordmark shrinks a little
   more than the logo does, so text is what gives way first if space
   is tight. */
@media (max-width: 480px) {
  .brand__logo {
    width: 34px;
    height: 34px;
  }
  .brand__wordmark {
    font-size: 0.8rem;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .manifesto-section__bg {
    transform: none !important;
  }
}

/* =========================================================
   CODEX FINAL — deterministic chaos-stage composition
   Prevents cards from entering the title on short browser windows.
   ========================================================= */
.chaos-system-section {
  justify-content: flex-start;
}

.chaos-stage {
  max-width: 72rem;
  height: clamp(440px, 56vh, 610px);
  margin-top: clamp(0.7rem, 1.5vw, 1rem);
}

.chaos-stage__card--lg { width: min(230px, 46vw); }
.chaos-stage__card--md { width: min(205px, 41vw); }
.chaos-stage__card--sm { width: min(185px, 37vw); }

.black-hole-static {
  width: clamp(470px, 31vw, 560px);
}

@media (max-width: 1439px) {
  .black-hole-static { width: clamp(420px, 36vw, 500px); }
}

@media (max-height: 700px) and (min-width: 701px) {
  .chaos-system-section {
    height: 100vh;
    min-height: 100vh;
    padding: 4rem 0 0.75rem;
  }

  .chaos-system-head { max-width: 42rem; }
  .chaos-system-head .eyebrow { font-size: 0.68rem; }
  .chaos-system-title {
    font-size: clamp(1.35rem, 2.35vw, 1.75rem);
    line-height: 1.08;
  }
  .chaos-system-body {
    margin-top: 0.55rem;
    max-width: 35rem;
    font-size: 0.86rem;
    line-height: 1.45;
  }
  .chaos-stage {
    flex: 1 1 auto;
    min-height: 300px;
    height: auto;
    margin-top: 0.4rem;
  }
  .chaos-stage__card--lg { width: 188px; }
  .chaos-stage__card--md { width: 178px; }
  .chaos-stage__card--sm { width: 166px; }
  .chaos-stage__card-inner {
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
  }
  .chaos-stage__label {
    font-size: 0.62rem;
    margin-bottom: 0.35rem;
  }
  .chaos-stage__card p {
    font-size: 0.76rem;
    line-height: 1.42;
  }
  .black-hole-static { width: clamp(350px, 31vw, 420px); }
}

@media (max-width: 700px) {
  .chaos-system-section {
    min-height: 100vh;
    height: auto;
    padding-bottom: 1.5rem;
  }
  .chaos-stage {
    height: clamp(570px, 82vh, 700px);
  }
  .black-hole-static { width: clamp(260px, 74vw, 320px); }
}