/* ===========================================================================
   PALETA Y SISTEMA DE ÉNFASIS DEL LANZAMIENTO DE ERIC
   ---------------------------------------------------------------------------
   Paleta ORO SOBRE PETRÓLEO, fijada por dirección el 2026-09-18
   (DEC-PALETA-ERIC-002, que revisa DEC-PALETA-ERIC-001).

   Esta hoja se carga DESPUÉS de las tres portadas (source, adapter, popup) y
   hace cuatro cosas, ninguna de ellas cosmética suelta:

   1. Declara la paleta como tokens canónicos `--pc-*`: única fuente de color.
   2. Reengancha a ellos los tokens heredados del diseño portado, de modo que
      cambiar un color del lanzamiento siga siendo cambiar UNA línea.
   3. Unifica el resaltado de palabras clave en UN mecanismo.
   4. Fija el CTA con el degradado exacto de dirección.

   POR QUÉ EL ORO APARECE TAN POCO. Es la regla de dirección de arte y es la
   que sostiene la jerarquía: el oro vale por ser escaso. Se reserva al CTA
   principal y a las pocas palabras decisivas que marca el mecanismo de
   énfasis. El dorado DECORATIVO del diseño portado —hilos, filetes,
   ornamentos: 141 literales— se remapeó a gris azulado precisamente para que
   el oro no se gastara en adornos.

   CONTRASTE. Todos los pares de texto están verificados sobre el CSS servido
   con la fórmula WCAG 2.x. La tabla vive en
   `docs/propuesta-landing-eric-fase1.md` §2.3.
   =========================================================================== */

:root {
  /* — Superficies — */
  --pc-fondo: #040a12;
  --pc-fondo-2: #07101b;

  /* — Texto — */
  --pc-titular: #f4f3ec;      /* marfil, solo titulares */
  --pc-parrafo: #bfccd5;      /* gris azulado, cuerpo */
  --pc-secundario: #9baebb;
  --pc-discreto: #8297a8;     /* 6,51:1 — AA, NO para texto largo */

  /* — Oro: acento único, y escaso a propósito — */
  --pc-oro: #d5b87e;
  --pc-cta-texto: #0b1420;
  --pc-cta-borde: #eed7a6;
  --pc-cta-claro: #e4c98e;
  --pc-cta-oscuro: #c6a568;

  /* — Estados semánticos. Nunca decorativos. — */
  --pc-error: #ff8a7a;
  --pc-ok: #7fd6a4;

  /* — Líneas. El filete es decorativo y está exento de SC 1.4.11; el borde
       de control sí cumple el umbral de 3:1. — */
  --pc-filete: rgba(191, 204, 213, 0.14);
  --pc-borde-campo: rgba(191, 204, 213, 0.46);

  /* — Entorno de mercado (sección «problema», 18-09-2026) —
       Azul AMBIENTAL para rejilla, velas y niveles. Sale del rango petróleo
       del hero, apagado: NO es el cian retirado ni un azul hielo brillante.
       Existe como token —y no como literal en el componente— porque lo usan
       velas, líneas, iconos y glow, y tienen que cambiar juntos.
       Alcista/bajista se distinguen por LUMINOSIDAD (claro/base), nunca por
       verde/rojo: el verde significa beneficio. — */
  --pc-mercado: #2f5f8a;
  --pc-mercado-claro: #6f9cc3;
  --pc-mercado-tenue: rgba(47, 95, 138, 0.26);

  /* — Cristal técnico de las tarjetas: superficie y borde. — */
  --pc-cristal-borde: rgba(120, 150, 180, 0.42);

  /* — Pérdida. Semántica de mercado, distinta de `--pc-error` (estado de
       formulario, que exige contraste alto): aquí va contenida. Solo para
       el SL y la cifra de P/L SEMANAL. — */
  --pc-perdida: #d9756b;

  /* ——— Reenganche de los tokens portados ———
     El HTML y el CSS de LANDING-PROD-001 se conservan con su estructura
     original a propósito: son la traza de una importación autorizada.
     Renombrar `--ink` o `--carmine` en 115 KB de CSS portado sería reescribir
     esa traza. Se reengancha: el nombre viejo sobrevive como alias, el valor
     lo manda `--pc-*`. Ningún alias apunta ya a un sistema anterior. */
  --ink: var(--pc-fondo);
  --ink-soft: var(--pc-fondo-2);
  --ink-warm: var(--pc-fondo);
  --ink-wine: var(--pc-fondo-2);
  --ivory: var(--pc-titular);
  --ivory-deep: var(--pc-parrafo);
  --carmine: var(--pc-oro);
  --carmine-dark: var(--pc-cta-oscuro);
  --carmine-soft: var(--pc-oro);
  --gold-quiet: var(--pc-secundario);
  --text-on-dark: var(--pc-parrafo);
  --text-on-dark-muted: var(--pc-secundario);
  --line-dark: var(--pc-filete);
  --line-dark-soft: var(--pc-filete);

  /* Una sola familia. Bodoni Moda es la voz tipográfica del lanzamiento
     anterior —un didone de moda— y aquí no pinta nada. Se deja de usar.
     NOTA: el binario y su `preload` siguen en el layout porque
     `tests/fe/landing-production.test.mjs` los afirma y esa prueba queda
     fuera del alcance de reescritura autorizado. Retirarlos es una mejora
     de 25,8 KB pendiente de ampliar ese alcance. */
  --font-editorial: 'Manrope Landing';
}

body {
  background: var(--pc-fondo);
  color: var(--pc-parrafo);
}

/* ===========================================================================
   MECANISMO ÚNICO DE RESALTADO DE PALABRAS CLAVE
   ---------------------------------------------------------------------------
   El diseño portado resolvía el énfasis con DIECIOCHO reglas distintas, con
   colores escritos a mano y pesos que iban del 500 al 800 sin criterio. Aquí
   se colapsan en DOS —una para titular, otra para cuerpo— más `.pc-clave`
   como escotilla. El marcado no cambia: `<em>` y `<strong>` siguen siendo los
   enganches, así que resaltar una palabra nueva es envolverla.

   Los selectores se enumeran explícitamente en vez de usar `p strong` a secas
   porque en este diseño hay `<strong>` y `<b>` ESTRUCTURALES —los dígitos del
   reloj, el icono +/− del FAQ, el monograma, los rótulos de la barra fija—
   que no son palabras clave y no deben teñirse de oro.
   =========================================================================== */

/* — Palabra clave en titular — */
h1 em,
h2 em,
h3 em,
.pc-clave,
.problem h2 mark,
.agenda h2 em,
.audience-heading h2 em,
.final-cta h2 em,
.famous-quote .famous-quote-line2 em {
  color: var(--pc-oro);
  font-style: normal;
  /* El énfasis HEREDA tamaño y tracking (19-09-2026). Con `font-size:1.04em`
     y `letter-spacing:-0.005em` cada palabra dorada era una variante más de
     la escala: en el hero medía 88,06 px dentro de un titular de 84,67 px, y
     al caer de línea desalineaba el bloque. El oro ya distingue la palabra;
     no necesita además ser más grande. El peso baja de 800 a 700: 800 contra
     un titular de 500 es un salto de dos escalones. */
  font-weight: 700;
  font-size: inherit;
  letter-spacing: inherit;
  background: none;
  box-shadow: none;
}

/* — Palabra clave en cuerpo — */
.hero-copy strong,
.problem-lede b,
.pb-cierre b,
.adn-cierre b,
.reassure h2 b,
.midcta-line b,
.whynow h2 b,
.mc-line b,
.democ-close strong,
.audience-sub strong,
.founder-body b,
.founder-lead b,
.agenda-sub b,
.tst-context b,
.faq-list p b,
.benefit-list b,
.final-cta-inner > p.cta-push strong {
  color: var(--pc-oro);
  font-style: normal;
  font-weight: 700;
  box-shadow: none;
}

/* Titulares en marfil, cuerpo en gris azulado. */
h1, h2, h3, .hero-preheadline { color: var(--pc-titular); }
p, li, dd, figcaption, blockquote { color: var(--pc-parrafo); }
.eyebrow, .section-number, .small-label { color: var(--pc-secundario); }

/* ===========================================================================
   CTA PRINCIPAL — especificación exacta de dirección
   ---------------------------------------------------------------------------
   Cubre las tres formas que toma el mismo botón: `.primary-cta`, el CTA de la
   barra de aviso y el de la barra fija. Los tres son enlaces en producción
   (`LandingProduccion.astro` convierte los <button> en <a class="nav-cta">
   para conservar el tracking y el fallback sin JavaScript), así que el
   selector tiene que valer para ambos elementos.
   =========================================================================== */

.primary-cta,
.announcement .nav-cta,
.announcement button[data-wow-cta],
.sticky-cta .nav-cta,
.sticky-cta button[data-wow-cta] {
  --cta-rest-shadow: 0 8px 38px rgba(207, 175, 101, 0.2);
  --cta-attention-color: rgba(213, 184, 126, 0.24);
  --cta-glint: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--pc-cta-borde);
  border-radius: 4px;
  background: linear-gradient(120deg, var(--pc-cta-claro), var(--pc-cta-oscuro));
  box-shadow: 0 8px 38px rgba(207, 175, 101, 0.2);
  color: var(--pc-cta-texto);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: none;
}

/* Espaciado interior generoso: el botón tiene que pesar en la página. */
.primary-cta {
  min-height: 62px;
  padding-inline: 36px;
}

.primary-cta .cta-arrow-inline,
.announcement .nav-cta .cta-arrow-inline {
  color: var(--pc-cta-texto);
}

/* Hover: sube el resplandor y se desplaza 2 px, nunca más. */
.primary-cta:hover,
.announcement .nav-cta:hover,
.sticky-cta .nav-cta:hover {
  border-color: var(--pc-cta-borde);
  background: linear-gradient(120deg, #eed7a6, #d2b072);
  box-shadow: 0 12px 46px rgba(207, 175, 101, 0.34);
  color: var(--pc-cta-texto);
  transform: translateY(-2px);
}

.primary-cta:active { transform: translateY(0); }

/* Foco de teclado: anillo visible contra el fondo oscuro, sin depender del
   relleno (que es claro y anularía un halo dorado). */
.primary-cta:focus-visible,
.announcement .nav-cta:focus-visible,
.sticky-cta .nav-cta:focus-visible {
  box-shadow:
    0 0 0 3px var(--pc-fondo),
    0 0 0 5px var(--pc-titular),
    0 8px 38px rgba(207, 175, 101, 0.2);
  outline: none;
  transform: translateY(-2px);
}

.primary-cta:disabled,
.primary-cta:disabled:hover {
  box-shadow: var(--cta-rest-shadow);
  opacity: 0.72;
  transform: none;
}

/* Anillo de foco general, para todo lo demás que se pueda enfocar. */
.landing-production :focus-visible {
  outline: 2px solid var(--pc-oro);
  outline-offset: 2px;
}

/* Quien pide menos movimiento no recibe el desplazamiento: solo el brillo. */
@media (prefers-reduced-motion: reduce) {
  .primary-cta,
  .announcement .nav-cta,
  .sticky-cta .nav-cta {
    transition: none;
  }

  .primary-cta:hover,
  .primary-cta:focus-visible,
  .announcement .nav-cta:hover,
  .sticky-cta .nav-cta:hover {
    transform: none;
  }
}

/* ===========================================================================
   HERO — integración de la fotografía
   ---------------------------------------------------------------------------
   La fotografía es azul petróleo y el oro lo pone la interfaz: no se tiñe la
   imagen ni se intenta «sacarle» el dorado.

   El velo de la izquierda se retiñe al petróleo de la paleta (antes era un
   negro neutro que ensuciaba el azul) y se ALIGERA: el original llegaba a
   0,97 de opacidad sobre un lateral que en esta foto ya es oscuro de por sí,
   y apagaba la imagen de más.
   =========================================================================== */

.hero { background: var(--pc-fondo); }

.hero-shade {
  background:
    linear-gradient(90deg,
      rgba(4, 10, 18, 0.94) 0%,
      rgba(4, 10, 18, 0.74) 30%,
      rgba(4, 10, 18, 0.30) 56%,
      rgba(4, 10, 18, 0) 76%),
    linear-gradient(180deg,
      rgba(4, 10, 18, 0.5) 0%,
      rgba(4, 10, 18, 0) 26%,
      rgba(4, 10, 18, 0) 68%,
      rgba(4, 10, 18, 0.72) 100%);
}

/* ---------------------------------------------------------------------------
   MÓVIL: la imagen se APILA, no se superpone.
   ---------------------------------------------------------------------------
   Por qué. El asset «mobile» que entregó dirección no es vertical: es el
   mismo encuadre 1.6:1, solo que más cerrado. Recortarlo a vertical obliga a
   centrarlo en la cara de Eric, y entonces el titular solo puede caer encima
   de su cara —prohibido— o encima del gráfico de velas del fondo, que no
   debemos acentuar. Apilar conserva el retrato entero y deja el texto sobre
   fondo sólido, que además es la única forma de garantizar el contraste que
   declara la tabla: sobre una fotografía no se puede garantizar.

   La imagen se funde con el fondo por abajo con una máscara, para que no
   quede el borde rectangular evidente que dirección quiere evitar.
   --------------------------------------------------------------------------- */
@media (width <= 767px) {
  .hero {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }

  .hero-media {
    position: relative;
    z-index: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1586 / 992;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 99%);
    mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 99%);
  }

  .hero-media img {
    position: relative;
    height: 100%;
    object-position: 58% center;
  }

  /* Apilado: el velo lateral sobra y el vertical lo hace la máscara. */
  .hero-shade { display: none; }

  .hero-content {
    position: relative;
    z-index: 1;
    min-height: 0;
    margin-top: -14%;
    padding-top: 0;
    padding-bottom: 34px;
  }

  /* El CTA deja de ir clavado al fondo de la ventana: fluye con el texto. */
  .hero-conversion {
    position: static;
    width: auto;
    margin-top: 22px;
    inset: auto;
  }

  .hero h1 { max-width: 100%; }
}

/* ===========================================================================
   CORRECCIONES DE SEMÁNTICA DE COLOR
   =========================================================================== */

/* Un campo inválido NO puede pintarse del color del acento: el acento
   significa «esto importa», no «esto está mal». */
.registro-experiencia input:user-invalid,
.registro-experiencia select:user-invalid,
.registro-experiencia textarea:user-invalid {
  border-color: var(--pc-error);
}

.registro-experiencia [data-form-mensaje]:not([hidden]) { color: var(--pc-error); }

.registro-experiencia input,
.registro-experiencia select,
.registro-experiencia textarea {
  border-color: var(--pc-borde-campo);
}

/* ===========================================================================
   ESTADOS PENDIENTES — degradación honesta
   `CLAUDE.md`: «Nunca datos falsos permanentes». Mientras falten la fecha, la
   marca o las piezas gráficas, la interfaz lo DICE. No se simula.
   =========================================================================== */

.pieza-pendiente {
  display: grid;
  place-content: center;
  gap: 4px;
  min-height: 160px;
  padding: 24px;
  border: 1px dashed var(--pc-borde-campo);
  border-radius: 4px;
  background: var(--pc-fondo-2);
  color: var(--pc-secundario);
  font-family: var(--font-interface), Arial, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.pieza-pendiente b {
  display: block;
  color: var(--pc-parrafo);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pieza-pendiente--alta { min-height: 380px; }
.pieza-pendiente--ancha { min-height: 220px; }

/* — Reloj sin fecha confirmada: no inventa una cuenta atrás, la reclama — */
.event-countdown[data-countdown-pendiente] .countdown-digits,
.event-countdown[data-countdown-pendiente] .countdown-kicker {
  display: none;
}

.countdown-pendiente {
  display: none;
  color: var(--pc-oro);
  font-family: var(--font-interface), Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.event-countdown[data-countdown-pendiente] .countdown-pendiente { display: inline-block; }

/* — «¿Esto es para ti?»: la regla del tablero de corte —
   Al retirar la foto del tablero (qualify-board-mat) quedó a la vista la
   regla que la acompañaba: una tira de 10 px con ticks cada 23 px en el
   borde superior del marco (`.qualify-board::after`). Es el mismo resto,
   dibujado por CSS: se apaga. La cuadrícula tenue de la sección se queda:
   leída en captura es rejilla de gráfico, no tablero. */
.qualify-board::after { background: none; }

/* — Avatar del grupo de WhatsApp sin material: hueco declarado — */
.preview-avatar--pendiente {
  display: block;
  border: 1px dashed var(--pc-borde-campo);
  border-radius: 50%;
  background: var(--pc-fondo-2);
}

/* — Marcador de dato pendiente dentro del copy — */
.dato-pendiente {
  padding: 0 6px;
  border-radius: 3px;
  background: rgba(213, 184, 126, 0.12);
  color: var(--pc-oro);
  font-family: var(--font-interface), Arial, sans-serif;
  font-size: 0.86em;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ===========================================================================
   MONOGRAMA DEL CTA INTERMEDIO — el logo de Eric, como firma
   ---------------------------------------------------------------------------
   El diseño portado ponía aquí una «FL», el monograma de la marca anterior.
   Desde el 18-09-2026 va el logotipo de Eric (DEC-TRAYECTORIA-ERIC-004 §8),
   y va COMO FIRMA, no como protagonista:

    · Misma altura que el monograma al que sustituye (59 px) y MENOS
      superficie: aquel se pintaba a 74×59, éste a 43×59.
    · Mismo peso visual discreto: tono `--pc-discreto` al 42 % de opacidad,
      que es exactamente la que tenía el anterior.
    · NO en oro. El oro está reservado al CTA y a pocas palabras decisivas; un
      monograma decorativo dorado quemaría esa escasez. Aquí el color lo pone
      un token y el activo es solo una MÁSCARA en blanco y negro: por
      construcción, este monograma no puede salir dorado.
    · Sin animación y sin repetirse en ningún otro punto de la página.

   El activo es un WebP de 1,6 KB con canal alfa, generado desde el PNG del
   cliente: recortado al borde de la carta e invertida la luminancia, de modo
   que la carta queda opaca y el jóker calado. No se vectorizó: un trazado
   automático a este tamaño habría dado un contorno sucio.
   =========================================================================== */

.midcta-monogram {
  display: block;
  width: 43px;
  height: 59px;
  background-color: var(--pc-discreto);
  opacity: 0.42;
  -webkit-mask-image: url('/assets/img/marca/eric-marca-mask.webp');
  mask-image: url('/assets/img/marca/eric-marca-mask.webp');
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

@media (width <= 767px) {
  .midcta-monogram { width: 34px; height: 46px; }
}

/* ===========================================================================
   RÓTULO DE MARCA — texto, no imagen
   ---------------------------------------------------------------------------
   La marca es PROVISIONAL hasta que llegue un logotipo, así que se publica
   como texto: un lockup tipográfico habría que deshacerlo el día que llegue
   el real. El nombre vive una sola vez, en `marca` de `edicion.ts`, y la caja
   la decide cada sitio desde aquí — no se guarda una segunda cadena en
   mayúsculas, que sería una segunda fuente de verdad.

   Dónde va en versal y dónde no:
    · Los dos `.wordmark` (hero y pie) y el rótulo del Paso 2 del modal, que
      ocupan el sitio de un logotipo: VERSAL con tracking, que es lo que hace
      que un texto lea como rótulo de marca.
    · El copyright del pie y el `<title>`: caja normal. Una línea legal y una
      pestaña de navegador con el nombre en mayúsculas chirrían.
   =========================================================================== */

.wordmark--texto span,
p.success-logo.wordmark--texto {
  color: var(--pc-titular);
  font-family: var(--font-interface), Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wordmark--texto span { font-size: 0.96rem; }

p.success-logo.wordmark--texto {
  width: auto;
  height: auto;
  margin: 0 0 6px;
  font-size: 1.02rem;
  text-align: center;
}

@media (width <= 767px) {
  .wordmark--texto span { font-size: 0.82rem; letter-spacing: 0.13em; }
}

/* ===========================================================================
   CANTOS DE TELA HEREDADOS
   El diseño portado remataba las tarjetas con un orillo y un punto de cruz.
   Se sustituyen por el mismo lenguaje que el resto: marcas de tiempo
   verticales. Nada diagonal — una diagonal insinúa dirección de precio.
   =========================================================================== */

.tag-crossstitch {
  background-image: repeating-linear-gradient(
    180deg,
    rgba(130, 151, 168, 0.55) 0 2px,
    transparent 2px 9px
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1px 100%;
}

.tag-selvage {
  background: none;
  border-left: 1px solid var(--pc-filete);
  box-shadow: none;
}


/* ===========================================================================
   DESCARGO DE RIESGO (DEC-CIFRAS-ERIC-001 §5.4)
   Visible y contiguo a la cifra, nunca escondido.
   =========================================================================== */
.descargo-cifra {
  display: block;
  margin-top: 6px;
  color: var(--pc-secundario);
  font-family: var(--font-interface), Arial, sans-serif;
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1.45;
  text-transform: none;
}

/* ===========================================================================
   PIE · maquetación (18-09-2026)
   El diseño portado ponía copyright, descargo y enlaces legales en una sola
   fila flex: el párrafo largo aplastaba a los otros dos hasta partirlos en
   dos líneas («© 2026 ERIC / CARRILLO», «AVISO / LEGAL»), y además heredaba
   las mayúsculas espaciadas y el peso 700 de la fila, que lo volvían un
   bloque ilegible. Ahora: el descargo ocupa su propia fila a lo ancho, en
   caja normal, y debajo van copyright y enlaces, cada uno en una línea.
   El literal del descargo no cambia (lo fija una prueba): solo su caja.
   =========================================================================== */
.footer-bottom {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "riesgo riesgo"
    "copy   nav";
  align-items: center;
  gap: 24px 32px;
}

.footer-bottom > span:first-child {
  grid-area: copy;
  white-space: nowrap;
}

.footer-bottom nav {
  grid-area: nav;
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: end;
  gap: 10px 24px;
}

.footer-bottom nav > * {
  white-space: nowrap;
}

.footer-riesgo {
  grid-area: riesgo;
  max-width: 124ch;
  margin: 0;
  color: var(--pc-secundario);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.6;
  text-transform: none;
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .footer-bottom {
    grid-template-columns: 1fr;
    grid-template-areas:
      "riesgo"
      "nav"
      "copy";
    gap: 18px;
  }

  .footer-bottom nav {
    justify-content: flex-start;
    justify-self: start;
    gap: 12px 22px;
  }

  /* La marca de agua «EN DIRECTO» del cierre pisaba la línea de fecha y hora
     y la dejaba ilegible: en móvil no hay sitio para las dos. */
  .final-cta-texture {
    display: none;
  }
}


/* ===========================================================================
   RESTOS DE LA MARCA ANTERIOR DIBUJADOS POR CSS (18-09-2026)
   No eran imágenes ni texto del marcado, así que ningún grep los veía.
   =========================================================================== */

/* El sello del marco de «Soy Eric» llevaba «FL», las iniciales de la marca
   anterior, en la serif de aquella identidad. */
.founder-seal::after {
  content: "EC";
  font-family: var(--font-interface), Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* «Antes / Ahora»: la pieza superior de «Antes» era un retal con el canto
   cortado a tijera de picos y trama de tejido. Con la pieza P4 detrás —la
   cámara acorazada de un banco— sobra: «Antes» queda como una placa igual
   que «Ahora», cada una al pie de su mitad de la imagen. */
.mc-swatch {
  display: none;
}

.mc-traditional {
  min-height: 0;
  padding-top: 0.8rem;
}


/* ===========================================================================
   PIEZA P4 · «ANTES / AHORA» (aprobada por dirección el 18-09-2026)
   Díptico: a la izquierda, la puerta acorazada de un banco, cerrada; a la
   derecha, un portátil sobre una mesa doméstica con un gráfico lateral. Es
   fondo de la figura: el texto y las placas van encima, en HTML. El velo
   superior e inferior garantiza la lectura del copy y de las placas.
   =========================================================================== */
.mc-pieza {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
}

.mc-pieza img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.mc-pieza::after {
  position: absolute;
  inset: 0;
  content: "";
  /* Visto a 1728: el copy dorado cruzaba el acero más brillante de la cámara
     y perdía contraste. El velo superior sube y baja más despacio. */
  background: linear-gradient(
    180deg,
    rgba(4, 10, 18, 0.82) 0%,
    rgba(4, 10, 18, 0.58) 24%,
    rgba(4, 10, 18, 0) 48%,
    rgba(4, 10, 18, 0) 66%,
    rgba(4, 10, 18, 0.66) 100%
  );
}

/* Visto a 390: la figura es vertical y un recorte «cover» se quedaba con el
   centro oscuro del díptico: el portátil desaparecía y la idea se perdía. En
   móvil la pieza va entera, como banda 3:2 apoyada sobre las placas. */
@media (max-width: 767px) {
  .mc-pieza {
    inset: auto 0 8.6rem;
    aspect-ratio: 3 / 2;
  }

  .mc-pieza::after {
    background: linear-gradient(
      180deg,
      rgba(4, 10, 18, 1) 0%,
      rgba(4, 10, 18, 0) 24%,
      rgba(4, 10, 18, 0) 76%,
      rgba(4, 10, 18, 1) 100%
    );
  }
}


/* ===========================================================================
   PIEZA DEL CIERRE · P-CIERRE (aprobada por dirección el 18-09-2026)
   Silla de escritorio vacía frente a la mesa, de noche. Sustituye al hueco
   declarado que dejó la fotografía del atelier. El encuadre se centra en el
   respaldo y el monitor, que es lo que nombra el eyebrow de la sección.
   =========================================================================== */
.fc-scene img {
  object-position: 50% 52%;
}