/* ============================================================
   Visuala Studio — "Del otro lado del presupuesto" (artículo en /)
   Diseño 1a (mobile 390) + 1c (desktop 1440, "titulares con imagen")
   de Claude Design, 2026-09-24, más el rediseño del 2026-09-28 (mobile
   con banners, titulares grandes y cuerpo a 17; s3 en cards) y el del
   2026-09-29 (s4 y s5 en cards con las dos respuestas, bajadas grandes
   en desktop, s10 en dos columnas). El hero desktop sigue siendo el 3b. Lo que ve cualquiera que entra a visuala.studio
   sin la cookie del gate.

   Estructura:
   · hero      — portada (a sangre hasta 1140, bloque arriba), copy
                 sobre el cielo
   · 9 bloques — mobile: franjas que alternan crema (page) y crema
                 tibia (warm). Desktop: una pila de tarjetas separadas
                 por 24px de crema; s2, s3, s5, s6, s7 y s9 abren con un
                 banner de imagen a sangre que lleva el eyebrow y el h2
   · medición  — único bloque oscuro, en TINTA (no verde): la
                 propuesta, las tres condiciones y el agendador
   · autor     — foto circular + las notas del documento; el artículo
                 termina ahí (la contratapa se eliminó el 2026-09-29)

   DECISIONES LOAD-BEARING

   1 · Standalone, como /investigacion: no participa de la transición
       light→dark de la landing. Carga tokens + components + esta hoja.

   2 · El agendador es el motor de /investigacion (js/investigacion.js)
       sin cambios. El motor busca .inv__book, .inv__book-title y
       genera .inv__day / .inv__slot / .inv__state / .inv__mail. Esas
       clases son GANCHOS: acá se estilan scopeadas a .art-book, y
       investigacion.css no se carga. Cambiar un nombre de esos rompe el
       motor en las dos páginas.

   3 · En desktop el título "Elegí un horario" vive DENTRO de la card, en
       la columna izquierda; en mobile es un eyebrow sobre el fondo
       oscuro, afuera. Es un solo elemento (el motor lo oculta al
       confirmar), así que en desktop la card es un grid de 2×3 y el
       <form> lo hereda con subgrid.

   4 · Un banner es UN solo encabezado (.art-banner: imagen + eyebrow +
       h2). En desktop es la imagen a sangre con el texto abajo a la
       izquierda; en mobile (rediseño 2026-09-28) la imagen es una
       franja de 240 y el eyebrow + h2 van debajo, sobre la crema.

   5 · Lima: sólo los dos CTA primarios (hero y Confirmar). Desde el
       2026-09-29 el gráfico de s5 y el estado 01 ya no la usan. Día y
       horario elegidos van en tinta llena. Focus: anillo global en
       tinta sobre crema; en el hero, los banners y el bloque oscuro pasa
       a claro, porque tinta sobre oscuro no se ve.

   6 · Medidas del diseño en --vars scopeadas a .art-page (mismo patrón
       que .inv / .faq / .legal): son de esta página y no inflan tokens/.
       Mobile por defecto; desktop desde 900px. La columna de contenido
       mide 976px (el artboard) y se centra en viewports más anchos.
       EXCEPCIONES: el hero pasa a su layout desktop recién en 1120 (ver
       "0 · HERO"), y los cuatro estados van a 2 columnas hasta 1120 y a
       4 desde ahí (a 900 no entran cuatro).

   9 · Un solo texto en los dos anchos: donde el diseño trae copy distinto
       en mobile y en desktop, va el de desktop (owner, 2026-09-29). .art-d
       queda sólo para piezas de layout que existen en desktop (el corte
       de columna de s7).

   7 · Ancho máximo 1140 (owner, 2026-09-23). Hero y <main> miden como
       mucho --art-max, centrados, con la crema de la página afuera. Las
       tarjetas desktop llevan radio sólo cuando hay crema a los lados
       (contenedor ≥ 1141, la misma regla que el hero): hasta ahí tocan
       los bordes de la ventana, y un radio o un borde lateral contra el
       borde de la ventana se lee como un corte.

   8 · Hero desktop = diseño 3b (owner, 2026-09-23). Panorámica rotada
       y encuadrada por fórmula desde el alto del copy (--art-b3-*), nunca
       por la altura de la ventana. Ver "0 · HERO".
   ============================================================ */

.art-page {
  /* ---- Colores que el sistema no tiene ----
     Los azules son el fondo de las fotos mientras cargan; los scrims
     son los del diseño. Los alfas sobre tinta y sobre crema se derivan
     de tokens con color-mix. */
  --art-hero-bg:   #0C1D2B;
  --art-night:     #07143A;   /* cielo del 3b y banners */
  --art-scrim:     linear-gradient(180deg, rgb(6 18 44 / 0.62) 0%, rgb(6 18 44 / 0.18) 42%, rgb(6 18 44 / 0) 62%);
  --art-banner-scrim: linear-gradient(90deg, rgb(7 20 58 / 0.62) 0%, rgb(7 20 58 / 0.34) 36%, rgb(7 20 58 / 0) 60%);
  --art-define-ink: #2B3035;       /* cuerpo de lectura en mobile (owner, 2026-09-24; 2026-09-28 a todo el texto corrido) */
  --art-card-line:  #D9D2C2;       /* borde de las cards de s3 en mobile */

  --art-ink-05:    color-mix(in srgb, var(--ink-900) 5%, transparent);
  --art-ink-06:    color-mix(in srgb, var(--ink-900) 6%, transparent);
  --art-ink-10:    color-mix(in srgb, var(--ink-900) 10%, transparent);
  --art-ink-12:    color-mix(in srgb, var(--ink-900) 12%, transparent);
  --art-ink-14:    color-mix(in srgb, var(--ink-900) 14%, transparent);
  --art-ink-18:    color-mix(in srgb, var(--ink-900) 18%, transparent);
  --art-ink-20:    color-mix(in srgb, var(--ink-900) 20%, transparent);
  --art-ink-25:    color-mix(in srgb, var(--ink-900) 25%, transparent);

  --art-on-dark-50: color-mix(in srgb, var(--cream-100) 50%, transparent);
  --art-on-dark-62: color-mix(in srgb, var(--cream-100) 62%, transparent);
  --art-on-dark-70: color-mix(in srgb, var(--cream-100) 70%, transparent);
  --art-on-dark-72: color-mix(in srgb, var(--cream-100) 72%, transparent);
  --art-on-dark-86: color-mix(in srgb, var(--cream-100) 86%, transparent);
  --art-on-dark-06: color-mix(in srgb, var(--cream-100) 6%, transparent);
  --art-on-dark-14: color-mix(in srgb, var(--cream-100) 14%, transparent);
  --art-on-dark-16: color-mix(in srgb, var(--cream-100) 16%, transparent);
  --art-on-dark-24: color-mix(in srgb, var(--cream-100) 24%, transparent);

  --art-white-75:  color-mix(in srgb, var(--white) 75%, transparent);
  --art-white-82:  color-mix(in srgb, var(--white) 82%, transparent);
  --art-white-88:  color-mix(in srgb, var(--white) 88%, transparent);
  --art-cream50-42: color-mix(in srgb, var(--cream-50) 42%, transparent);

  /* ---- Medidas · mobile (artboard 390) ---- */
  --art-gutter:     24px;
  --art-measure:    640px;
  --art-sec-y:      56px 48px;

  /* ---- Ancho máximo del artículo (owner, 2026-09-23) ----
     Todo el artículo vive en un contenedor de 1140 centrado; afuera, la
     crema de la página. Es el máximo del CONTENEDOR: la columna de
     lectura sigue siendo --art-measure. */
  --art-max:        1140px;
  /* Separación entre tarjetas desktop y radio de las tarjetas. El radio
     arranca en 0 y lo prende la @container de abajo (decisión 7). */
  --art-stack:      var(--space-5);
  --art-r:          0px;

  /* ---- Hero desktop, diseño 3b (owner, 2026-09-23) ----
     Encuadre de la panorámica (6336×2688), con los valores del export
     de Claude Design: la foto se escala a partir del alto del bloque de
     copy, se rota y se clava por un punto de anclaje de la imagen
     (70.73% · 86.92%, el borde del hielo junto al pie de atrás). Ver
     "0 · HERO" para la fórmula. */
  --art-b3-copy-top: 276px;      /* tope de referencia de la fórmula (1c) */
  --art-b3-copy-h:   309px;      /* alto de referencia del bloque de copy */
  --art-b3-body-top: 196px;      /* dónde cae el copy. El 1c lo ponía en 240
                                    (184 + 56); el owner lo subió el
                                    2026-09-24 para que los botones queden
                                    sobre el cielo y no sobre el hielo:
                                    a 212 el PDF todavía rozaba el pico */
  --art-b3-anchor-x: 1032px;     /* ancla, medida desde el borde izquierdo
                                    del COPY: 1096 − 64 del artboard */
  --art-b3-scale:    1.41;
  --art-b3-dx:       -13px;
  --art-b3-dy:       10px;
  --art-b3-rot:      -10deg;
  /* Aire de crema arriba del hero cuando deja de ir a sangre. */
  --art-hero-frame: var(--space-5);

  /* ---- Tipografía · mobile (rediseño 2026-09-28) ----
     Titulares más grandes y con cortes fijos (.art-br-m), cuerpo a 17
     en un gris tinta (--art-body-ink). --art-sec-body-t es el aire entre
     el titular de un banner y el cuerpo de su sección. */
  --art-eyebrow:    12px;
  --art-h2:         43px;
  --art-h2-lh:      1;
  --art-h2-ls:      -0.042em;
  --art-h2-mt:      18px;
  --art-h2-mb:      28px;
  --art-h3:         26px;
  --art-body:       17px;
  --art-body-lh:    1.65;
  --art-body-ls:    var(--ls-normal);
  --art-body-ink:   var(--art-define-ink);
  --art-gap-p:      18px;
  --art-sec-body-t: 40px;
}

/* El hero cambia de layout en 1120, no en 900 como el resto (ver "0 ·
   HERO"). Su fondo cambia con él: el azul del cielo de la panorámica
   3b, que es lo que se ve mientras carga. Sin scrim: el 3b no lo lleva. */
@media (min-width: 1120px) {
  .art-page {
    --art-hero-bg:  var(--art-night);
    --art-scrim:    none;
  }
}

@media (min-width: 900px) {
  .art-page {
    --art-gutter:   72px;
    --art-measure:  976px;

    --art-eyebrow:  11px;
    --art-h2:       46px;
    --art-h2-lh:    1.07;
    --art-h2-ls:    -0.03em;
    --art-h2-mt:    18px;
    --art-h2-mb:    22px;
    --art-body:     17px;
    --art-body-lh:  1.75;
    --art-body-ls:  var(--ls-normal);
    --art-body-ink: var(--ink-900);
  }
}

/* El artículo no tiene nav fijo: el ancla del CTA cae al borde exacto
   de la sección, sin los 78px que base.css reserva para la landing. */
html:has(> body.art-page) { scroll-padding-top: 0; }

.art-page {
  background: var(--surface-page);
  color: var(--fg-1);
  /* Contenedor para las @container de abajo: el hero y las tarjetas
     saben si tienen crema a los lados midiendo el body, sin contar el
     scrollbar (100vw sí lo cuenta). */
  container: art / inline-size;
}

/* El artículo entero, hero incluido, en un máximo de --art-max. */
.art-hero,
.art-page > main {
  max-width: var(--art-max);
  margin-inline: auto;
}

.art-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--art-measure) + 2 * var(--art-gutter));
  margin-inline: auto;
  padding-inline: var(--art-gutter);
}

/* Visualmente oculto, presente para lectores de pantalla. */
.art-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Cortes de línea del diseño desktop. En mobile el texto corre libre.
   El del hero sigue al hero, que cambia de layout en 1120. */
.art-br-d { display: none; }
@media (min-width: 900px) {
  .art-br-d { display: inline; }
  .art-br-m { display: none; }
  .art-hero .art-br-d { display: none; }
}
@media (min-width: 1120px) {
  .art-hero .art-br-d { display: inline; }
}

/* Piezas que sólo existen en desktop (decisión 9). */
@media (max-width: 899px) {
  .art-d { display: none !important; }
}


/* ============================================================
   0 · HERO
   ============================================================ */

.art-hero {
  position: relative;
  height: 787px;
  background: var(--art-hero-bg);
  overflow: hidden;
  color: var(--white);
}

/* Mobile (1a): la foto ocupa los 645px de arriba, con un fundido al azul
   noche abajo. La portada 02 va con el encuadre fijo del diseño: 140%
   de ancho centrada, y translate(10, −13) · scale(.95) · rotate(6°). */
.art-hero__media {
  position: absolute;
  inset: 0 0 auto 0;
  height: 645px;
  overflow: hidden;
}

.art-hero__media img {
  position: absolute;
  left: -20%;
  right: auto;
  top: -107px;
  width: 140%;
  height: 808px;
  max-width: none;
  object-fit: cover;
  object-position: 62% 50%;
  translate: 10px -13px;
  scale: 0.95;
  rotate: 6deg;
}

.art-hero__media::before,
.art-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.art-hero__media::before { background: var(--art-scrim); }
.art-hero__media::after {
  top: auto;
  height: 56px;
  background: linear-gradient(180deg, transparent 0%, var(--art-hero-bg) 100%);
}

.art-hero__in {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 18px;
  padding-bottom: 28px;
}

.art-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.art-hero__mark { height: 14px; width: auto; }

.art-hero__date {
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-chip);
  text-transform: uppercase;
  color: var(--art-white-75);
}

.art-hero__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 56px;
}

.art-hero__title {
  margin: 0;
  max-width: 11ch;
  font-size: 38px;
  font-weight: var(--fw-semibold);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--white);
}

.art-hero__lead {
  max-width: 296px;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: var(--ls-normal);
  color: var(--art-white-88);
}
.art-hero__title + .art-hero__lead { margin-top: 20px; }

.art-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.art-hero__actions .btn { min-height: 50px; }

.art-hero :focus-visible { outline-color: var(--white); }

/* El layout desktop del hero arranca en 1120 (el ancho del artboard
   del 3b), no en 900. La foto no se achica con el ancho (su tamaño sale
   del alto del copy) y va anclada al copy, así que el sujeto nunca pisa
   el texto: lo que pasa en anchos menores es que el borde derecho corta
   la figura. Medido el 2026-09-23: a 1080 de viewport (hero de 1065 con
   scrollbar) quedaba cortado. Entre 900 y 1119 el hero usa el layout
   mobile. Si se mueve este corte, moverlo también en los media del
   <picture> y de los preload del HTML. */
@media (min-width: 1120px) {
  /* DISEÑO 3b. Todo se deriva del alto del bloque de copy (H), como en
     el export de Claude Design:
       h0    = H / 0.2654          alto base de la foto
       h     = h0 × escala         alto de la foto
       w     = h × 6336 / 2688     ancho (proporción del master)
       ancla = (copy + anchor-x + dx, tope + H + dy)
       alto del hero = tope + H + 0.1308 × h0
     La foto se ubica para que su punto (70.73%, 86.92%) caiga en el
     ancla, y se rota alrededor de ese mismo punto.

     La fórmula usa un tope de 276 (1c) y el copy cae en 196
     (--art-b3-body-top): son independientes. Mover el copy no mueve la
     foto ni cambia el alto del hero.

     MÁRGENES (owner, 2026-09-23): el copy y la barra de arriba van
     alineados con el resto del artículo, en el mismo borde de contenido
     que .art-wrap. El ancla se mide desde el borde izquierdo del COPY:
     así la foto se corre junto con el copy y el sujeto guarda con él la
     misma distancia que en el diseño en cualquier ancho. */
  .art-hero {
    --art-b3-h0: calc(var(--art-b3-copy-h) / 0.2654);
    --art-b3-h:  calc(var(--art-b3-h0) * var(--art-b3-scale));
    --art-b3-w:  calc(var(--art-b3-h) * 6336 / 2688);
    height: calc(var(--art-b3-copy-top) + var(--art-b3-copy-h) + 0.1308 * var(--art-b3-h0));
  }

  .art-hero__media { height: auto; inset: 0; }
  .art-hero__media img {
    /* Borde izquierdo del copy, en coordenadas del hero. El 100% es el
       ancho del hero (el media ocupa el hero entero). */
    --art-b3-copy-x: calc(max(0px, (100% - var(--art-measure) - 2 * var(--art-gutter)) / 2) + var(--art-gutter));
    right: auto;
    left: calc(var(--art-b3-copy-x) + var(--art-b3-anchor-x) + var(--art-b3-dx) - 0.7073 * var(--art-b3-w));
    top: calc(var(--art-b3-copy-top) + var(--art-b3-copy-h) + var(--art-b3-dy) - 0.8692 * var(--art-b3-h));
    width: var(--art-b3-w);
    height: var(--art-b3-h);
    object-fit: fill;
    /* El encuadre de la portada mobile no aplica: el 3b va neutro. */
    translate: none;
    scale: none;
    rotate: none;
    transform: rotate(var(--art-b3-rot));
    transform-origin: 70.73% 86.92%;
  }
  .art-hero__media::before,
  .art-hero__media::after { display: none; }

  .art-hero__in { padding-top: 26px; padding-bottom: 0; }

  .art-hero__mark { height: 17px; }
  .art-hero__date { font-size: 11px; }

  .art-hero__body {
    position: absolute;
    left: var(--art-gutter);
    top: var(--art-b3-body-top);
    width: 440px;
    margin: 0;
    flex: none;
  }

  .art-hero__title {
    font-size: 52px;
    line-height: 0.98;
    letter-spacing: -0.038em;
  }

  .art-hero__lead {
    max-width: none;
    margin-top: 10px;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--white) 90%, transparent);
  }
  .art-hero__title + .art-hero__lead { margin-top: 20px; }

  .art-hero__actions {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 28px;
    white-space: nowrap;
  }

  /* "Descargar el PDF" sobre la foto: vidrio esmerilado sutil para que
     se lea sobre la roca (owner, 2026-09-23). Mismo borde que la receta
     compartida (components.css, "2b · FROSTED CHIP") pero con velo y
     blur más leves: la receta entera aplanaba la roca en una mancha
     gris. Valores locales a este botón. En mobile el botón va sobre la
     franja azul lisa, donde el vidrio no tiene nada que esmerilar. */
  .art-hero .btn--secondary.btn--dark {
    background: color-mix(in srgb, var(--white) 5%, transparent);
    border-color: var(--chip-glass-border);
    backdrop-filter: blur(3px) saturate(1.1);
    -webkit-backdrop-filter: blur(3px) saturate(1.1);
  }
  .art-hero .btn--secondary.btn--dark:hover:not([disabled]) {
    border-color: var(--fg-on-dark);
  }
}

/* Arriba de --art-max el hero deja de ir a sangre: es un bloque de 1140
   con el radio de las superficies del sistema y crema alrededor. Hasta
   1140 sigue tocando los bordes, así que ahí no lleva ni radio ni aire
   arriba. Las tarjetas del artículo siguen la misma regla (--art-r). */
@container art (min-width: 1141px) {
  .art-hero {
    /* El aire de arriba crece con el de los costados hasta el tope: a
       1150 no hay 24px arriba y 5px a los lados. */
    margin-top: min(var(--art-hero-frame), (100cqi - var(--art-max)) / 2);
    border-radius: var(--radius-surface);
  }
  .art-page > main { --art-r: var(--radius-surface); }
}


/* ============================================================
   BLOQUES — ritmo compartido
   ============================================================ */

.art-sec { padding-block: var(--art-sec-y); }
.art-sec--warm { background: var(--surface-warm); }
.art-sec--first { padding-bottom: 46px; }

.art-eyebrow {
  margin: 0;
  font-size: var(--art-eyebrow);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-500);
}

.art-h2 {
  margin: var(--art-h2-mt) 0 var(--art-h2-mb);
  max-width: 22ch;
  font-size: var(--art-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--art-h2-lh);
  letter-spacing: var(--art-h2-ls);
  color: var(--ink-900);
}

.art-p,
.art-lead,
.art-prose p,
.art-split p {
  font-size: var(--art-body);
  line-height: var(--art-body-lh);
  letter-spacing: var(--art-body-ls);
  color: var(--art-body-ink);
}

.art-prose {
  display: flex;
  flex-direction: column;
  gap: var(--art-gap-p);
}

.art-label {
  display: block;
  margin: 0;
  font-size: var(--art-eyebrow);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-500);
}

.art-page strong { font-weight: var(--fw-semibold); color: var(--ink-900); }

/* Títulos de card y filas: en el artboard son <div>, que cortan línea
   por línea. Acá son h3 y p, que base.css balancea (balance / pretty) y
   cortarían distinto. Se vuelve al corte normal para calzar el diseño. */
.art-define__title,
.art-question__title,
.art-key__title,
.art-term p { text-wrap: wrap; }

.art-page a[href^="mailto:"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

@media (min-width: 900px) {
  /* Desktop: pila de tarjetas separadas por crema (1c). La separación
     va arriba de cada bloque. */
  .art-page > main > * { margin-top: var(--art-stack); }

  .art-sec--first { padding-block: 96px 88px; }

  .art-prose--cols {
    display: block;
    columns: 2;
    column-gap: 52px;
    max-width: 960px;
  }
  .art-prose--cols p { margin-bottom: var(--art-gap-p); }
  .art-prose--cols p:last-child { margin-bottom: 0; }
}


/* ============================================================
   BANNERS — decisión 4
   Mobile (2026-09-28): franja de imagen de 240 arriba de la sección, y
   el eyebrow + h2 debajo, sobre la crema. Desktop (1c): imagen a sangre
   de 520 con scrim a la izquierda y el texto abajo; la sección sigue
   debajo (.art-sec__body) formando una sola tarjeta con el banner: tibia
   (s2, s6) o con un hairline sin borde de arriba (s3, s5, s7, s9).
   ============================================================ */

.art-sec--banner { padding-top: 0; }

.art-banner {
  display: flex;
  flex-direction: column;
}

.art-banner__media {
  display: block;
  height: 240px;
  overflow: hidden;
}
.art-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right center;
}

.art-banner::after { display: none; }

.art-banner__in {
  display: flex;
  flex-direction: column;
  gap: var(--art-h2-mt);
  padding-top: 36px;
}
.art-banner__in .art-h2 { margin: 0; }
.art-sec--banner .art-sec__body { padding-top: var(--art-sec-body-t); }

/* En la franja angosta de mobile la figura de s3 queda cortada contra
   el borde: el encuadre la corre un poco hacia adentro. */
@media (max-width: 899px) {
  .art-banner--s3 .art-banner__media img { object-position: 93% center; }
}

@media (min-width: 900px) {
  .art-sec--banner { padding: 0; }

  .art-banner {
    display: block;
    position: relative;
    height: 520px;
    overflow: hidden;
    border-radius: var(--art-r) var(--art-r) 0 0;
    background: var(--art-night);
    color: var(--white);
  }
  .art-banner--clear { background: transparent; }

  .art-banner__media {
    position: absolute;
    inset: 0;
    height: auto;
  }

  .art-banner::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: var(--art-banner-scrim);
    pointer-events: none;
  }
  .art-banner--clear::after { display: none; }

  .art-banner__in {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    padding-top: 0;
    padding-bottom: 64px;
  }
  .art-banner .art-eyebrow { color: var(--art-white-82); }
  .art-banner .art-h2 {
    margin: 0;
    max-width: 13ch;
    font-size: 60px;
    line-height: 1.02;
    letter-spacing: -0.038em;
    color: var(--white);
  }
  .art-banner--wide .art-h2 { max-width: 22ch; }
  .art-banner :focus-visible { outline-color: var(--white); }

  .art-sec--banner .art-sec__body { padding-block: 72px 88px; }
  .art-sec--s2 .art-sec__body { padding-bottom: 104px; }

  .art-sec--warm.art-sec--banner { border-radius: var(--art-r); }
  .art-sec--line .art-sec__body {
    border-bottom: 1px solid var(--art-ink-10);
    border-radius: 0 0 var(--art-r) var(--art-r);
  }
}

/* Con crema a los lados, el hairline cierra también los costados. */
@container art (min-width: 1141px) {
  .art-sec--line .art-sec__body {
    border-inline: 1px solid var(--art-ink-10);
  }
}


/* ============================================================
   1 · ANTES QUE NADA
   ============================================================ */

.art-disclosure {
  margin-top: 20px;
  font-size: 25px;
  font-weight: var(--fw-medium);
  line-height: 1.32;
  letter-spacing: -0.028em;
  color: var(--ink-900);
}

.art-define { margin-top: 56px; }

.art-define__title {
  font-size: var(--art-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  letter-spacing: -0.032em;
  color: var(--ink-900);
}
/* La regla bajo el título (mobile) / a su derecha (desktop). */
.art-define__title::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 18px;
  background: var(--border-strong);
}

.art-define__body {
  display: flex;
  flex-direction: column;
  gap: var(--art-gap-p);
  margin-top: 20px;
}

.art-define__body p {
  font-size: var(--art-body);
  line-height: var(--art-body-lh);
  color: var(--art-body-ink);
}

@media (min-width: 900px) {
  .art-disclosure {
    margin-top: 26px;
    font-size: 36px;
    font-weight: inherit;
    line-height: 1.36;
    letter-spacing: -0.022em;
  }

  .art-define { margin-top: 72px; }
  .art-define__title {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.03em;
  }
  .art-define__title::after {
    flex: 1;
    margin-top: 0;
  }

  .art-define__body {
    display: block;
    columns: 2;
    column-gap: 56px;
    margin-top: 28px;
  }
  .art-define__body p { margin-bottom: 18px; }
  .art-define__body p:last-child { margin-bottom: 0; }

  /* El primer párrafo se parte en tres y el tercero abre la columna
     derecha: 2 + 2 párrafos, columnas parejas (owner, 2026-09-28). */
  .art-define__part { display: block; }
  .art-define__part + .art-define__part { margin-top: 18px; }
  /* Sin margen arriba: después de un corte forzado Chrome lo conserva
     y la columna derecha arrancaría 18px más abajo. */
  .art-define__part.art-define__part--col {
    margin-top: 0;
    break-before: column;
  }
}


/* ============================================================
   2 · COMPARAR PRESUPUESTOS
   ============================================================ */

/* Mobile: el giro va en su propio renglón, como un párrafo más. */
.art-lead__turn {
  display: block;
  margin-top: var(--art-gap-p);
}

.art-split,
.art-split__col {
  display: flex;
  flex-direction: column;
  gap: var(--art-gap-p);
}
.art-split { margin-top: var(--art-gap-p); }

@media (min-width: 900px) {
  .art-lead {
    max-width: 24em;
    font-size: 30px;
    line-height: 1.4;
    letter-spacing: -0.022em;
    color: var(--ink-900);
  }
  .art-sec--s2 .art-lead { margin-top: 32px; }
  .art-lead__turn { display: inline; margin: 0; }

  .art-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--border-soft);
  }
  .art-split__close { font-weight: var(--fw-semibold); }
}


/* ============================================================
   3 · LAS DOS PREGUNTAS
   ============================================================ */

/* Mobile (2026-09-28): cada pregunta es una card crema con el número
   en una pastilla de tinta. Las cards salen 4px más anchas que la
   columna de lectura, como en el diseño. Desktop: dos columnas bajo una
   regla, sin card. */
.art-questions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 32px -4px 0;
}

.art-question {
  display: flex;
  flex-direction: column;
  padding: 24px 20px 26px;
  background: var(--cream-50);
  border: 1px solid var(--art-card-line);
  border-radius: var(--radius-surface);
  box-shadow: 0 4px 16px var(--art-ink-05);
}

.art-question__num {
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 32px;
  height: 32px;
  margin: 0 0 14px;
  padding-inline: 8px;
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--cream-100);
}

.art-question__title {
  font-size: 24px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  text-wrap: balance;
}

.art-question__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.art-question__body p {
  font-size: var(--art-body);
  line-height: var(--art-body-lh);
  letter-spacing: var(--art-body-ls);
  color: var(--art-body-ink);
}

@media (min-width: 900px) {
  .art-questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    margin: 56px 0 0;
  }
  .art-question {
    display: block;
    padding: 28px 0 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--border-strong);
    border-radius: 0;
    box-shadow: none;
  }
  .art-question__num {
    display: block;
    min-width: 0;
    height: auto;
    margin: 0 0 14px;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: var(--art-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    font-variant-numeric: normal;
    color: var(--ink-500);
  }
  .art-question__title {
    font-size: var(--art-h3);
    text-wrap: wrap;
  }
  .art-question__body { margin-top: 10px; }
  .art-question__body p { color: var(--ink-700); }
}


/* ============================================================
   CARDS DE ESTADO — s4 y s5 (rediseño 2026-09-29)
   Una sola pieza para los cuatro estados y para los tres proyectos:
   cabeza (número o nombre + las dos respuestas), título, y un pie
   bajo una regla ("Qué hacer esa semana" en s4, el desvío en s5). La
   primera card va en crema llena; las demás, translúcidas.
   Mobile: apiladas con 8px de aire. Desktop: columnas con las filas
   alineadas por subgrid (s4: 2 columnas hasta 1120 y 4 desde ahí; s5:
   3). El row-gap del grid padre sólo separa bandas en s4 a 2 columnas:
   cada card lo anula en su subgrid.
   ============================================================ */

.art-sub {
  margin: 0 0 44px;
  font-size: var(--art-body);
  line-height: var(--art-body-lh);
  color: var(--art-body-ink);
}

.art-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.art-card {
  padding: 24px 20px 22px;
  background: var(--art-cream50-42);
  border-radius: var(--radius-surface);
}
.art-card--lead { background: var(--cream-50); }

.art-card__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.art-card__num {
  margin: 0;
  font-size: 36px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink-900);
}

/* Las dos respuestas: pregunta a la izquierda, Sí / No a la derecha. */
.art-card__checks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 7px;
  margin: 0;
  padding: 10px 0;
  border-block: 1px solid var(--border-soft);
  font-size: 14px;
  line-height: 1.3;
}
.art-card__checks dt { color: var(--ink-500); }
.art-card__checks dd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
}
.art-card__icon {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--ink-900);
}
.art-card__x { stroke: var(--cream-50); }

.art-card__title {
  margin: 16px 0 0;
  font-size: 22px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-wrap: balance;
}
/* En s5 el título va directo al pie. */
.art-cards--cases .art-card__title { margin-bottom: 24px; }

.art-card__text {
  margin: 10px 0 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-700);
}

.art-card__foot {
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.art-card__foot .art-label { font-size: 11px; }

.art-card__action {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--ink-900);
}

/* ---- s5: el desvío, con su barra a escala (el ancho es el %) ---- */

.art-card__foot--dev {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.art-card__val {
  margin: 0;
  font-size: 52px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-900);
}

.art-card__bar {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-warm);
}
.art-card__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--green-800);
}
.art-card__fill--0  { width: 0; }
.art-card__fill--30 { width: 30%; }
.art-card__fill--40 { width: 40%; }

/* La bandeja tibia que agrupa las tres cards de s5. */
.art-cards-tray {
  padding: 8px;
  background: var(--surface-warm);
  border-radius: 16px;
}

@media (min-width: 900px) {
  .art-sec--states {
    padding-block: 96px;
    border-radius: var(--art-r);
  }
  .art-sec--states .art-h2 { margin-bottom: 22px; }

  .art-sub {
    max-width: 24em;
    margin-bottom: 56px;
    font-size: 30px;
    line-height: 1.4;
    letter-spacing: -0.022em;
    color: var(--ink-900);
  }

  .art-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 8px;
  }
  .art-cards--cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .art-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .art-cards--cases .art-card { grid-row: span 3; }

  .art-card__checks { font-size: 12.5px; }

  .art-card__title {
    align-self: start;
    font-size: 20px;
  }
  .art-cards--cases .art-card__title { margin-bottom: 28px; }

  .art-card__text {
    margin-bottom: 28px;
    font-size: 15px;
  }

  .art-card__foot { align-self: start; }
}

@media (min-width: 1120px) {
  .art-cards--states { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ============================================================
   BAJADAS EN DOS TIEMPOS — s5, s6 y s7 (rediseño 2026-09-29)
   En desktop una sección abre con una frase grande (.art-intro__big) y
   sigue en cuerpo; en mobile esa frase es el comienzo de un párrafo
   normal. Es un solo texto: en mobile los bloques van en línea
   (display: inline) y se leen como un párrafo; desde 900 vuelven a
   ser bloques. Sin display: contents (falla en Chrome Android).
   ============================================================ */

.art-intro {
  font-size: var(--art-body);
  line-height: var(--art-body-lh);
  letter-spacing: var(--art-body-ls);
  color: var(--art-body-ink);
  text-wrap: pretty;
}
.art-intro__big,
.art-intro__rest,
.art-intro__cols,
.art-intro__cols > p:first-child { display: inline; }

/* Lo que sigue a la primera frase dentro de las columnas: párrafos. */
.art-intro__cols > p + p { display: block; margin-top: var(--art-gap-p); }

.art-intro--cases { margin-bottom: 28px; }
.art-intro--close { margin-top: 28px; }

@media (min-width: 900px) {
  .art-intro__big,
  .art-intro__rest,
  .art-intro__cols,
  .art-intro__cols > p:first-child { display: block; }

  .art-intro__big {
    margin: 0;
    max-width: 24em;
    font-size: 30px;
    line-height: 1.4;
    letter-spacing: -0.022em;
    color: var(--ink-900);
  }

  /* s5: la frase grande y el resto debajo. */
  .art-intro--cases {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
  }
  .art-intro--cases .art-intro__rest {
    max-width: 70ch;
    color: var(--ink-700);
  }

  /* s5, cierre: caja tibia en dos columnas. */
  .art-intro--close {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 56px;
    margin-top: 56px;
    padding: 40px;
    background: var(--surface-warm);
    border-radius: var(--radius-surface);
  }
  .art-intro--close .art-intro__big {
    font-size: 28px;
    font-weight: var(--fw-semibold);
    line-height: 1.25;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  /* s6 y s7: la frase grande y el resto en dos columnas bajo una regla. */
  .art-intro__cols {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--border-soft);
    columns: 2;
    column-gap: 56px;
  }
  .art-intro__cols p,
  .art-intro__cols > p + p { margin: 0 0 22px; }
  .art-intro__cols > :last-child,
  .art-intro__cols > :last-child p:last-child { margin-bottom: 0; }

  /* Corte de columna a mitad de párrafo (s7): un bloque vacío que parte
     el párrafo y abre la columna derecha. En mobile es .art-d: no existe. */
  .art-colbreak {
    display: block;
    break-before: column;
  }
}

/* ============================================================
   5 · EL HALLAZGO — "Qué pasó" en B y en C, debajo de las cards
   ============================================================ */

.art-happened {
  display: flex;
  flex-direction: column;
  margin-top: 28px;
}
.art-happened__label {
  padding-bottom: 6px;
  line-height: 1;
}
.art-happened__list {
  display: flex;
  flex-direction: column;
}
.art-happened__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
}
.art-happened__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
}
.art-happened__text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--art-body-ink);
}

@media (min-width: 900px) {
  .art-happened {
    gap: 18px;
    margin-top: 48px;
  }
  .art-happened__label {
    padding: 0;
    font-size: 11px;
    line-height: 1.3;
  }
  .art-happened__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
  }
  .art-happened__item {
    gap: 8px;
    padding: 18px 0 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 0;
  }
  .art-happened__head { font-size: 17px; }
  .art-happened__text {
    font-size: 17px;
    line-height: 1.75;
    letter-spacing: var(--ls-normal);
    color: var(--ink-700);
  }
}


/* ============================================================
   6 · EL DATO CONTRAINTUITIVO
   La cita en Instrument Serif, en zona tibia. En mobile (2026-09-28)
   se lee como parte del encabezado: justo debajo del h2, alineada a la
   izquierda y cerrada por una regla corta. En desktop (2026-09-29)
   cierra la sección: centrada, grande y bajo una regla.
   ============================================================ */

.art-sec--s6 .art-sec__body { padding-top: 0; }

/* Fuera del .art-wrap (ver el HTML): la columna se arma acá. Los 22px
   de arriba son el gap del encabezado (18) + los 4 del diseño; la
   regla va a 14 + 18 de la cita, y 32 más abajo empieza el texto. */
.art-quote {
  box-sizing: border-box;
  max-width: calc(var(--art-measure) + 2 * var(--art-gutter));
  margin: 22px auto 32px;
  padding-inline: var(--art-gutter);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink-700);
}
.art-quote::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin-top: 32px;
  background: var(--ink-900);
}

.art-quote p {
  max-width: 17ch;
  font: inherit;
  letter-spacing: inherit;
  text-wrap: balance;
}

@media (min-width: 900px) {
  /* La cita va después del texto: el cuerpo es una columna y la cita
     se ordena al final. */
  .art-sec--s6 .art-sec__body {
    display: flex;
    flex-direction: column;
    padding-block: 72px 96px;
  }
  .art-quote {
    order: 1;
    box-sizing: content-box;
    width: calc(100% - 2 * var(--art-gutter));
    max-width: var(--art-measure);
    margin: 72px auto 0;
    padding: 48px 0 0;
    border-top: 1px solid var(--border-soft);
    font-size: 56px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--ink-900);
  }
  .art-quote::after { display: none; }
  .art-quote p { max-width: none; text-wrap: wrap; }
}


/* ============================================================
   7 · EL MARGEN
   ============================================================ */

.art-note {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
  padding: 20px;
  background: var(--cream-50);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-surface);
}

.art-note p {
  font-size: var(--art-body);
  line-height: var(--art-body-lh);
  letter-spacing: var(--art-body-ls);
  color: var(--ink-700);
}

@media (min-width: 900px) {
  .art-note {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .art-note p { color: var(--ink-900); }
}


/* ============================================================
   8 · LO IMPORTANTE
   Mobile: franja tibia. Desktop: tarjeta crema clara con borde y el
   titular grande, con "mueven el número" en la serif.
   ============================================================ */

.art-h2--keys em { font-style: normal; }

.art-keys {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.art-key {
  padding-top: 18px;
  border-top: 1px solid var(--border-strong);
}

.art-key__num {
  display: block;
  font-size: var(--art-eyebrow);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--ink-500);
}

.art-key__title {
  margin-top: 8px;
  font-size: var(--art-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink-900);
}

.art-key__text {
  margin-top: 10px;
  font-size: var(--art-body);
  line-height: var(--art-body-lh);
  color: var(--ink-700);
}

@media (min-width: 900px) {
  .art-sec--keys {
    padding-block: 112px 120px;
    background: var(--cream-50);
    border-block: 1px solid var(--border-soft);
    border-radius: var(--art-r);
  }

  .art-h2--keys {
    margin: 20px 0 64px;
    max-width: 14ch;
    font-size: 72px;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  .art-h2--keys em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: var(--fw-regular);
    letter-spacing: -0.01em;
  }

  .art-keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
  .art-key {
    padding-top: 28px;
    border-top-color: var(--ink-900);
  }
  .art-key__num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 56px;
    font-weight: var(--fw-regular);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink-900);
  }
  .art-key__title {
    margin-top: 24px;
    font-size: 24px;
    line-height: 1.22;
    letter-spacing: -0.02em;
  }
  .art-key__text {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.7;
  }
}

@container art (min-width: 1141px) {
  .art-sec--keys { border-inline: 1px solid var(--border-soft); }
}


/* ============================================================
   9 · LO QUE NO SE MIDE
   La primera frase sale del cuerpo y va como bajada (2026-09-29). En
   mobile se lee pegada al h2 (24px debajo) y el cuerpo arranca 40 más
   abajo.
   ============================================================ */

.art-sec--s9 .art-sec__body { padding-top: 24px; }

.art-lede {
  margin: 0 0 40px;
  font-size: 20px;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

@media (min-width: 900px) {
  .art-sec--s9 .art-sec__body { padding-top: 72px; }
  .art-lede {
    max-width: 34ch;
    margin-bottom: 44px;
    font-size: 28px;
    line-height: 1.3;
    letter-spacing: -0.025em;
  }
}


/* ============================================================
   10 · LA MEDICIÓN (bloque oscuro, tinta)
   ============================================================ */

.art-dark {
  background: var(--ink-900);
  color: var(--cream-100);
  padding-block: 60px 52px;
}

.art-dark .art-eyebrow { color: var(--art-on-dark-62); }
.art-dark .art-h2 { color: var(--cream-100); max-width: 20ch; }
.art-dark .art-p { color: var(--cream-100); }
.art-dark .art-label { line-height: 1; color: var(--art-on-dark-62); }

.art-dark :focus-visible { outline-color: var(--cream-100); }
.art-dark .art-book__form :focus-visible,
.art-dark .art-book__done :focus-visible { outline-color: var(--focus-ring); }

.art-offer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 32px;
}

.art-panel {
  padding: 22px 20px 24px;
  background: var(--art-on-dark-06);
  border: 1px solid var(--art-on-dark-16);
  border-radius: var(--radius-surface);
}

.art-panel__lead {
  margin-top: 14px;
  font-size: var(--art-body);
  line-height: var(--art-body-lh);
  color: var(--cream-100);
  text-wrap: wrap;
}

.art-terms {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.art-term {
  padding-top: 14px;
  border-top: 1px solid var(--art-on-dark-24);
}

.art-term__num {
  display: block;
  font-size: var(--art-eyebrow);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  color: var(--art-on-dark-50);
}

.art-term p {
  margin-top: 6px;
  font-size: var(--art-body);
  line-height: var(--art-body-lh);
  color: var(--cream-100);
}

.art-contact {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--art-on-dark-70);
}

@media (min-width: 900px) {
  .art-dark {
    padding-block: 104px;
    border-radius: var(--art-r);
  }
  .art-dark .art-h2 { max-width: 22ch; margin-bottom: 34px; }

  /* La bajada pasa a ser un panel. */
  .art-p--intro {
    padding: 32px 30px 34px 34px;
    font-size: 24px;
    line-height: 1.45;
    letter-spacing: -0.02em;
    background: var(--art-on-dark-06);
    border: 1px solid var(--art-on-dark-16);
    border-radius: var(--radius-surface);
    text-wrap: wrap;
  }

  /* Los paneles de abajo dejan de serlo: dos columnas, cada una con
     su etiqueta y el contenido bajo una regla. */
  .art-offer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    margin-top: 56px;
  }
  .art-panel {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }

  .art-panel__lead {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--art-on-dark-24);
  }
  .art-panel__big {
    font-size: 24px;
    font-weight: var(--fw-medium);
    line-height: 1.3;
    letter-spacing: -0.025em;
    color: var(--cream-100);
    text-wrap: balance;
  }
  .art-panel__rest {
    font-size: 17px;
    line-height: 1.7;
    color: var(--art-on-dark-86);
    text-wrap: pretty;
  }

  /* Las condiciones, una por fila: número y texto. */
  .art-terms {
    gap: 0;
    margin: 0;
  }
  .art-term {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    padding-block: 16px;
    border-top-color: var(--art-on-dark-14);
  }
  .art-term:first-child { border-top-color: var(--art-on-dark-24); }
  .art-term:last-child { padding-bottom: 0; }
  .art-term__num {
    font-size: 13px;
    line-height: 1.9;
  }
  .art-term p {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    text-wrap: pretty;
  }

  .art-contact {
    max-width: 80ch;
    margin-top: 22px;
  }
}


/* ============================================================
   10b · EL AGENDADOR
   Ganchos del motor (ver decisión 2): .inv__book-title, .inv__day,
   .inv__slot, .inv__state, .inv__tz, .inv__error, .inv__mail,
   .inv__who, .is-busy, .is-unavailable.
   ============================================================ */

.art-book { margin-top: 32px; }

/* El motor oculta con [hidden]; los display propios le ganarían. */
.art-book [hidden] { display: none !important; }

.art-book__title {
  margin: 0 0 14px;
  font-size: var(--art-eyebrow);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--art-on-dark-62);
}

.art-book__form,
.art-book__done {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--cream-50);
  border-radius: 14px;
  color: var(--ink-900);
}

.art-book__form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;   /* fieldset trae un min-content implícito que rompe el grid */
}

/* ---- Cuándo: días y horarios ---- */

.art-book__days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.art-book__days > .inv__state { grid-column: 1 / -1; }

.art-book__slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.art-book .inv__day,
.art-book .inv__slot {
  appearance: none;
  min-width: 0;
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: transparent;
  border: 1px solid var(--art-ink-18);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.art-book .inv__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 11px 6px 12px;
  border-radius: var(--radius-md);
}

.art-book .inv__day-dow {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.art-book .inv__day-num {
  font-size: 22px;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
}

.art-book .inv__day-mon {
  font-size: 12px;
  line-height: 1;
  color: var(--ink-500);
}

.art-book .inv__slot {
  padding: 9px 8px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

.art-book .inv__day:hover:not([aria-pressed="true"]),
.art-book .inv__slot:hover:not([aria-pressed="true"]) { border-color: var(--ink-700); }

.art-book .inv__day[aria-pressed="true"],
.art-book .inv__slot[aria-pressed="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--cream-100);
}
.art-book .inv__day[aria-pressed="true"] .inv__day-dow,
.art-book .inv__day[aria-pressed="true"] .inv__day-mon { color: var(--art-on-dark-72); }

.art-book .inv__state,
.art-book .inv__tz {
  margin: 0;
  font-size: 17px;
  line-height: var(--lh-body);
  color: var(--ink-700);
}
.art-book .inv__tz { margin-top: var(--space-3); }

/* ---- Quién: los cuatro campos ---- */

.art-book__who {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 22px !important;   /* le gana al margin:0 del reset de fieldset */
}

.art-book .field__label {
  margin: 0 0 10px;
  font-size: var(--art-eyebrow);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink-500);
}

.art-book .field__input {
  padding: 8px 0 9px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink-900);
  border-bottom: 1px solid var(--art-ink-25);
}
.art-book .field__input:focus { border-bottom-color: var(--ink-900); }

/* Campo que falta o que no pasa: línea base en tinta plena y más
   gruesa; el mensaje de .inv__error nombra el campo. */
.art-book .field__input[aria-invalid="true"] {
  border-bottom-color: var(--ink-900);
  border-bottom-width: 2.5px;
}

.art-book__submit {
  margin-top: 22px;
  padding: 15px 20px;
  font-size: 16px;
}
.art-book__submit[aria-busy="true"] { cursor: progress; }

/* Reservando: los chips dejan de responder. */
.art-book__form.is-busy .inv__day,
.art-book__form.is-busy .inv__slot { pointer-events: none; }

/* Sin horarios que ofrecer: queda sólo el mensaje con el mail. */
.art-book__form.is-unavailable .art-book__side { display: none; }

.art-book .inv__error {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  font-size: 17px;
  line-height: var(--lh-body);
  color: var(--ink-900);
  background: var(--surface-inset);
  border-radius: var(--radius-card);
}

/* ---- Confirmación ---- */

.art-book__done-title {
  margin: 0;
  font-size: 26px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  text-wrap: balance;
}
/* El foco llega acá por código, no por teclado: sin anillo. */
.art-book__done-title:focus { outline: none; }

.art-book__done-text {
  margin-top: var(--space-4);
  font-size: var(--art-body);
  line-height: var(--art-body-lh);
  color: var(--ink-700);
  overflow-wrap: anywhere;
}

@media (min-width: 900px) {
  /* La card es el contenedor entero: título + formulario en 2 columnas.
     Filas: [título | campos] [días y horarios | campos + botón] [error]. */
  .art-book {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    column-gap: 40px;
    margin-top: 64px;
    padding: 34px 36px 36px;
    background: var(--cream-50);
    border-radius: 14px;
    color: var(--ink-900);
  }

  .art-book__title {
    grid-column: 1;
    grid-row: 1;
    position: relative;   /* por encima del form, que cubre la misma celda */
    z-index: 1;
    margin: 0 0 48px;
    max-width: 16ch;
    font-size: 26px;
    font-weight: var(--fw-semibold);
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--ink-900);
  }

  .art-book__form {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    padding: 0;
    background: none;
    border-radius: 0;
  }

  .art-book__when {
    grid-column: 1;
    grid-row: 2;
  }

  .art-book__side {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .art-book .inv__error {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 15px;
  }

  .art-book .inv__state,
  .art-book .inv__tz { font-size: 15px; }

  .art-book__who {
    gap: 20px;
    margin-top: 0 !important;
  }

  /* El botón baja al fondo con margin-top:auto; el gap de la columna
     garantiza aire entre el último campo y el botón. */
  .art-book__submit {
    margin-top: auto;
    padding: 16px 20px;
    font-size: 17px;
  }

  .art-book .inv__day { padding: 14px 8px 15px; }
  .art-book .inv__day-num { font-size: 26px; }
  .art-book .inv__slot {
    padding: 10px 12px;
    font-size: 15px;
  }

  .art-book__done {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    padding: 0;
    background: none;
    border-radius: 0;
  }
  .art-book__done-text {
    font-size: 17px;
    line-height: 1.6;
  }
}


/* ============================================================
   11 · QUIÉN ESCRIBIÓ ESTO
   ============================================================ */

.art-author { padding-block: 48px 40px; }

.art-author__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.art-author__photo {
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 14%;
  background: var(--surface-warm);
}

.art-author__bio {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
}

.art-author__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.art-author__body p {
  font-size: var(--art-body);
  line-height: var(--art-body-lh);
  color: var(--ink-700);
}

.art-author__fine {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-500);
}

.art-author__fine--rule {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}

@media (min-width: 900px) {
  .art-author { padding-block: 88px 96px; }
  .art-author__head {
    gap: 40px;
    margin-bottom: 0;
  }
  .art-author__photo {
    width: 200px;
    height: 200px;
  }
  .art-author__bio { line-height: 1.65; }
  .art-author__body { margin-top: 40px; }
  .art-author__body p { line-height: 1.65; }
  .art-author__fine { font-size: 13px; }
}