/* Estudios Titan · six colours, two faces. Everything else derives. */
:root {
  --sc-canvas: #f5f6f6;
  --sc-surface: #ffffff;
  --sc-ink: #17181a;
  --sc-ink-soft: #5b5f66;
  --sc-accent: #d9241c;
  --sc-accent-ink: #ffffff;
  --sc-font-display: var(--font-archivo), system-ui, sans-serif;
  --sc-font-text: var(--font-instrument), system-ui, sans-serif;
  --tape-h: 56px;
  --gold: #b9964c;
}
html { scroll-padding-top: 2rem; }
body { padding-bottom: var(--tape-h); }
.ph { color: var(--sc-ink-soft); opacity: .7; }
.sc-display { font-stretch: 108%; }
a { color: inherit; }

/* Folio */
.folio { position: fixed; left: clamp(1rem, 2.4vw, 2.2rem); top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 1.1rem; width: 9.5rem; font-size: var(--sc-t-xs); line-height: 1.35; color: var(--sc-ink-soft); pointer-events: none; }
.folio > * { pointer-events: auto; }
.folio__mark img { width: 2.6rem; height: auto; display: block; }
.folio__chapter { display: flex; flex-direction: column; gap: .15rem; border-top: 1px solid var(--sc-hairline); padding-top: .8rem; }
.folio { padding: .9rem .9rem .9rem .8rem; margin-left: -.8rem; border-radius: var(--sc-r-sm); background: rgba(245,246,246,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .3s; }
.folio.is-dark { background: rgba(17,18,20,.6); }
.folio__num { font-family: var(--sc-font-display); font-weight: 700; color: var(--sc-ink); letter-spacing: 0; }
.folio__cta { font-weight: 600; color: var(--sc-accent); text-decoration: none; border-bottom: 1px solid currentColor; width: max-content; }
.folio__cta:hover { color: var(--sc-ink); }
.folio.is-dark { color: rgba(255,255,255,.72); } .folio.is-dark .folio__num { color: #fff; } .folio.is-dark .folio__cta { color: #fff; }
@media (max-width: 1100px) {
  .folio { top: auto; bottom: calc(var(--tape-h) + .7rem); transform: none; width: auto; flex-direction: row; align-items: center; gap: .8rem; left: .8rem; right: .8rem; padding: .55rem .8rem; }
  .folio__chapter { border-top: 0; padding-top: 0; flex: 1; flex-direction: row; align-items: baseline; gap: .45rem; }
  .folio__mark img { width: 1.8rem; }
}

/* Chapters share one measure; media bleeds, text never. */
.chapter { color: var(--sc-ink); background: #f5f6f6; }
.chapter--how { background: #ffffff; }
.chapter--title { min-height: 100dvh; display: flex; align-items: center; padding-block: clamp(5rem, 12vh, 9rem); }
.chapter--title .sc-wrap { padding-left: clamp(var(--sc-gutter), 14vw, 15rem); }
.title__where { margin: 0 0 1.4rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.title__h1 { font-size: clamp(2.6rem, 1.6rem + 5.4vw, 6.4rem); line-height: .98; letter-spacing: var(--sc-track-tight); max-width: 14ch; margin: 0; text-wrap: balance; }
.title__lede { max-width: 42ch; margin: 1.8rem 0 0; }
.title__cta { margin: 2.4rem 0 0; display: flex; gap: 1.4rem; align-items: baseline; flex-wrap: wrap; font-size: var(--sc-t-lg); }
.title__cta a { text-decoration: none; border-bottom: 2px solid var(--sc-accent); color: var(--sc-ink); font-weight: 600; padding-bottom: .15rem; }
.title__cta a:hover { color: var(--sc-accent); }
.title__cta-alt { font-weight: 500 !important; border-bottom-color: var(--sc-hairline-strong) !important; color: var(--sc-ink-soft) !important; font-size: var(--sc-t-base); }
.sc-body--onmedia { color: rgba(255,255,255,.8); margin-top: .8rem; }

/* Plates: museum labels on a rail */
.plates { display: flex; align-items: center; background: #f5f6f6; }
.plates__rail { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: clamp(1rem, 1.8vw, 1.6rem); max-height: 78vh; padding-inline: clamp(var(--sc-gutter), 14vw, 15rem) var(--sc-gutter); will-change: transform; }
.plate { flex: 0 0 auto; width: clamp(13rem, 17vw, 16rem); background: var(--sc-surface); border: 1px solid var(--sc-hairline); padding: 1.6rem 1.5rem 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; box-shadow: 0 1px 0 var(--sc-edge) inset, 0 18px 40px -28px var(--sc-shadow-color); transition: opacity .5s var(--sc-ease-out), transform .5s var(--sc-ease-out); }
.plate h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg); line-height: 1.05; letter-spacing: var(--sc-track-snug); margin: 0 0 1rem; text-wrap: balance; }
.plate dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; margin: 0; font-size: var(--sc-t-sm); }
.plate dt { color: var(--sc-ink-soft); } .plate dd { margin: 0; }
.plate--photo { padding: 0; overflow: hidden; }
.plate--photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #2a2b2d; }
.plate--photo h3 { margin: .85rem 1.1rem 1rem; font-size: var(--sc-t-base); }
.plate--lead, .plate--note { grid-row: 1 / -1; }
.plate--lead, .plate--note { background: transparent; border: 0; box-shadow: none; justify-content: center; width: clamp(16rem, 26vw, 24rem); }
.plate--note { width: clamp(14rem, 20vw, 18rem); }
/* El piso de opacidad es .64 y no .55: a .55 el nombre de la placa atenuada quedaba en 3.86:1
   contra el lienzo (auditoría 2026-09-12, mínimo 4.5:1). A .64 da 5.1:1 y la entrada se sigue
   notando porque el desplazamiento y la inclinación cargan el resto del efecto. */
@media (prefers-reduced-motion: no-preference) { .plate:not(.plate--lead) { opacity: calc(.64 + .36 * var(--plate-on, 0)); transform: translateY(calc(14px * (1 - var(--plate-on, 0)))) skewX(var(--lean, 0deg)); } }
.plates__more { display: none; }
@media (max-width: 860px) { .plates__rail { grid-template-rows: repeat(2, minmax(0, 1fr)); max-height: 70vh; } .plate { width: 44vw; } .plate--lead { width: 78vw; } .plate--note { display: none; } .plates__more { display: inline; } .plates__rail { padding-inline: var(--sc-gutter); gap: 1rem; } }

/* Tape chapter */
.tape-stage { background: #111214; }
.tape-stage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: saturate(.85); }
.tape-stage__copy { position: absolute; z-index: 3; left: clamp(var(--sc-gutter), 14vw, 15rem); right: var(--sc-gutter); bottom: calc(var(--tape-h) * 3.6 + 2.4rem); max-width: 30ch; color: #fff; display: flex; flex-direction: column; gap: .9rem; }
.tape-stage__copy > * { margin: 0; }
.tape-stage__h { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.02; letter-spacing: var(--sc-track-tight); }
.tape-stage__l { font-family: var(--sc-font-text); font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); line-height: 1.35; color: #ffffff; max-width: 34ch; }
@media (max-width: 860px) { .tape-stage__copy { bottom: 24vh; } }

/* Gear */
.gear { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-left: clamp(var(--sc-gutter), 14vw, 15rem); }
.gear__media { position: relative; height: clamp(26rem, 60vh, 40rem); }
.gear__fig { position: absolute; margin: 0; overflow: hidden; border-radius: var(--sc-r-sm); }
.gear__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gear__fig--a { left: 0; top: 6%; width: 78%; height: 44%; }
.gear__fig--b { right: 0; top: 30%; width: 42%; height: 46%; }
.gear__fig--c { left: 8%; bottom: 0; width: 62%; height: 30%; }
.gear__nums { display: flex; gap: 2.2rem; margin: .2rem 0 .6rem; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); }
.gear__nums b { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-2xl); color: var(--sc-ink); margin-right: .25rem; }
.gear__groups { display: grid; gap: 1.2rem; max-width: 52ch; }
.gear__groups h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-base); margin: 0 0 .25rem; }
.gear__groups p { margin: 0; color: var(--sc-ink-soft); }
@media (max-width: 960px) { .gear { grid-template-columns: 1fr; padding-left: var(--sc-gutter); } .gear__media { height: 22rem; } }

/* How */
.how { padding-left: clamp(var(--sc-gutter), 14vw, 15rem); }
.prices { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; max-width: 40rem; }
.prices li { border-top: 2px solid var(--sc-ink); padding-top: 1rem; }
.prices__n { display: block; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.2rem); line-height: 1; letter-spacing: var(--sc-track-tight); font-variant-numeric: tabular-nums; }
.prices__n sup { font-size: .42em; vertical-align: top; margin-left: .05em; font-weight: 700; }
.prices__l { display: block; margin-top: .5rem; color: var(--sc-ink-soft); }
.prices__note { margin: 1.4rem 0 0; color: var(--sc-ink-soft); max-width: 52ch; }
.steps { margin: 3.2rem 0 0; padding: 0 0 0 1.4rem; max-width: 48ch; display: grid; gap: .9rem; color: var(--sc-ink-soft); }
.steps b { color: var(--sc-ink); font-weight: 600; }
@media (max-width: 760px) { .prices { grid-template-columns: 1fr; gap: 1.2rem; } }

/* Close */
.close { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); padding-left: clamp(var(--sc-gutter), 14vw, 15rem); }
.close__lead { align-self: start; position: sticky; top: 6rem; }
.req { display: grid; gap: 1.1rem; }
.req label { display: grid; gap: .4rem; font-size: var(--sc-t-sm); font-weight: 600; }
.req input, .req textarea { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-weight: 400; font-size: var(--sc-t-base); padding: .8rem .9rem; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); background: var(--sc-surface); color: var(--sc-ink); min-height: 48px; }
.req input:focus-visible, .req textarea:focus-visible, .btn:focus-visible, .link:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 2px; }
.req__row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr) minmax(0, .7fr); gap: .9rem; }
.req__row--2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr); }
.req__svc { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.req__svc legend { font-size: var(--sc-t-sm); font-weight: 600; margin-bottom: .5rem; }
.req__svc label { position: relative; display: block; }
.req__svc input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.req__svc span { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); font-weight: 500; }
.req__svc input:checked + span { background: var(--sc-ink); color: #fff; border-color: var(--sc-ink); }
.req__svc input:focus-visible + span { outline: 3px solid var(--sc-accent); outline-offset: 2px; }
.btn { font: inherit; font-weight: 600; font-size: var(--sc-t-base); min-height: 52px; padding: 0 1.6rem; border: 0; border-radius: var(--sc-r-sm); background: var(--sc-accent); color: var(--sc-accent-ink); cursor: pointer; transition: transform .15s var(--sc-ease-out), background .15s; }
.btn:hover { background: #b81d16; } .btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--sc-ink); border: 1.5px solid var(--sc-ink); }
.req__msg { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-accent); min-height: 1.2em; }
.link { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--sc-accent); width: max-content; padding-bottom: .1rem; }
.colophon { grid-column: 1 / -1; margin-top: clamp(3rem, 8vw, 6rem); padding-top: 1.6rem; border-top: 1px solid var(--sc-hairline); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.colophon p { margin: 0; } .colophon b { color: var(--sc-ink); } .colophon a { text-decoration: none; border-bottom: 1px solid var(--sc-hairline-strong); }
.colophon__legal { grid-column: 1 / -1; font-size: var(--sc-t-xs); }
@media (max-width: 960px) { .close { grid-template-columns: 1fr; padding-left: var(--sc-gutter); } .close__lead { position: static; } .req__row, .req__svc { grid-template-columns: 1fr; } .req__svc { grid-template-columns: repeat(3, 1fr); } .colophon { grid-template-columns: 1fr; } }

/* The tape rail. Fixed, full width, the head at 50%. */
.tape { position: fixed; left: 0; right: 0; bottom: 0; height: var(--tape-h); z-index: 50; background: #1a1714; overflow: hidden; transform-origin: 0 100%; transform: scaleX(var(--tape-x, 1)) scaleY(var(--tape-scale, 1)); transition: transform .35s var(--sc-ease-out); }
.tape__gpu, .tape__2d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tape__gpu { display: none; } .tape.has-gpu .tape__gpu { display: block; } .tape.has-gpu .tape__2d { opacity: .75; }
.tape__marks { position: absolute; inset: 0; pointer-events: none; }
.tape__mark { position: absolute; top: 6px; transform: translateX(-50%); font: 600 10px/1 var(--sc-font-display); letter-spacing: .02em; color: rgba(255,255,255,.85); white-space: nowrap; opacity: 0; transition: opacity .4s var(--sc-ease-out); }
.tape__mark::after { content: ""; position: absolute; left: 50%; top: 14px; width: 1px; height: 8px; background: var(--gold); }
.tape__mark.is-set { opacity: 1; }
.tape__mark--artist { color: var(--gold); top: 28px; } .tape__mark--artist::after { top: -10px; }
.tape__mark--artist.is-odd { top: 40px; } .tape__mark--artist.is-odd::after { top: -22px; height: 20px; }
.tape__head { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--sc-accent); transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.tape-nav { position: fixed; left: 0; right: 0; bottom: 0; height: var(--tape-h); z-index: 51; display: flex; }
.tape-nav a { flex: 1; display: block; height: 100%; color: transparent; font-size: 0; }
.tape-nav a:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: -3px; }
[data-tape-act] ~ * { }
@media (prefers-reduced-motion: reduce) { .tape { transition: none; } .plate { transition: none; } }

/* Dark chapters carry their own ground so the engine's scrims darken, not lighten. */
.chapter--dark { --sc-canvas: #111214; --sc-surface: #1b1c1f; --sc-ink: #ffffff; --sc-ink-soft: rgba(255,255,255,.74); color: var(--sc-ink); }
.chapter--dark .sc-scrim--lead { background: linear-gradient(to top right, rgba(0,0,0,.86) 0%, rgba(0,0,0,.66) 34%, rgba(0,0,0,0) 66%); }
.chapter--dark .sc-scrim--left { background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 34%, rgba(0,0,0,0) 66%); }

@media (max-width: 860px) {
  .chapter--dark .sc-scrim--lead { background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,0) 68%); }
  .tape-stage__copy { max-width: none; left: var(--sc-gutter); right: var(--sc-gutter); bottom: calc(var(--tape-h) * 3.6 + 4.5rem); }
}

/* Duration: full day is the default; hours only appear when asked for */
.req__dur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.req__dur span { flex-direction: column; gap: .15rem; padding: .55rem .6rem; line-height: 1.15; }
.req__dur small { font-size: var(--sc-t-xs); font-weight: 400; opacity: .8; }
.req:has(input[name="duracion"][value="dia"]:checked) .req__horas { display: none; }
.req:has(input[name="duracion"][value="dia"]:checked) .req__row { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr); }

/* Ambient life while the page is still: the media breathes, the signal runs (tape.js). Compositor-only. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes breathe { from { transform: scale(1); } to { transform: scale(1.045); } }
  [data-sc-act="scrub"] .sc-stage__poster, [data-sc-act="scrub"] video[data-sc-scrub], .tape-stage__img { animation: breathe 16s ease-in-out infinite alternate; transform-origin: 50% 60%; will-change: transform; }
  .tape-stage__img { animation-duration: 22s; }
  @keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -10px, 0); } }
  .gear__fig img { animation: drift 9s ease-in-out infinite alternate; }
  .gear__fig--b img { animation-duration: 12s; animation-delay: -4s; }
  .gear__fig--c img { animation-duration: 10s; animation-delay: -7s; }
}

/* Inertial scroll (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
/* Load reveal: the tape draws in from the left, the folio fades in. Once. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-ready) .tape { --tape-x: 0; }
  html.is-ready .tape { transition: transform 1.3s cubic-bezier(.2, .8, .2, 1); }
  .folio { opacity: 0; transition: opacity .8s ease .9s, background .3s; }
  html.is-ready .folio { opacity: 1; }
}

/* el texto del capítulo con clip se atenúa al salir la sección (ver fadeOnLeave en tape.js) */
.sc-copy--lead > * { opacity: var(--leave, 1); }

/* La palabra sobre la cinta de dos pulgadas (portada). La señal dorada la dibuja tape.js con el mismo `run`
   que el riel y "pinta" las letras de izquierda a derecha al cargar (frente dorado, estela blanca). */
.title__tape { display: inline-block; white-space: nowrap; margin: 0 .03em; }
.title__tape-i { display: inline-block; position: relative; color: #f5f6f6; padding: 0 .16em; transform: rotate(-2deg); border-radius: 2px; overflow: hidden; }
.title__tape-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #111214; }
.title__tape-w { position: relative; font-weight: 800; clip-path: inset(0 var(--paint-r, 0%) 0 0); }
.title__tape-g { position: absolute; left: .16em; top: 0; font-weight: 800; color: #c9a24a; pointer-events: none; clip-path: inset(0 var(--paint-r, 0%) 0 var(--paint-l, 100%)); }

/* ── Páginas sueltas (gracias, acceso, panel, 404) ─────────────────────────────
   No cargan el motor: son papel quieto con la misma tipografía, el mismo logo y
   una tira de cinta fija abajo que cita el riel de la landing sin animarlo. */
.pagina { min-height: calc(100dvh - var(--tape-h)); display: grid; grid-template-rows: auto 1fr auto; background: var(--sc-canvas); color: var(--sc-ink); }
.pagina__cab { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  padding: clamp(1.4rem, 3vw, 2.4rem) var(--sc-gutter) clamp(1.2rem, 2.4vw, 1.8rem); border-bottom: 1px solid var(--sc-hairline); }
.pagina__marca { display: flex; align-items: center; gap: .85rem; text-decoration: none; }
.pagina__marca img { width: 2.6rem; height: auto; display: block; }
.pagina__marca span { display: grid; gap: .1rem; line-height: 1.15; }
.pagina__marca b { font-family: var(--sc-font-display); font-weight: 700; font-stretch: 108%; font-size: var(--sc-t-base); letter-spacing: var(--sc-track-snug); }
.pagina__marca small { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.pagina__marca:hover b { color: var(--sc-accent); }
.pagina__etiqueta { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.pagina__cuerpo { padding: clamp(2.6rem, 8vh, 5.5rem) var(--sc-gutter) clamp(2.6rem, 7vh, 4.5rem); width: 100%; }
.pagina__cuerpo--texto { max-width: 34rem; }
.pagina__cuerpo--panel { max-width: 56rem; }
.pagina__cuerpo > h1 { margin: 0; max-width: 18ch; }
.pagina__cuerpo > p { max-width: 46ch; margin: 1.4rem 0 0; }
.pagina__cuerpo > .sc-lede { margin-top: 1.8rem; }
.pagina__cuerpo > h2 { margin: 2.8rem 0 0; }
.pagina__cuerpo .req { margin-top: 2rem; }
.pagina__acciones { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; margin: 2.2rem 0 0; }
.pagina__pie { padding: 1.4rem var(--sc-gutter) 1.6rem; border-top: 1px solid var(--sc-hairline);
  display: grid; gap: .35rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.pagina__pie p { margin: 0; }
.pagina__pie a { text-decoration: none; border-bottom: 1px solid var(--sc-hairline-strong); }
.pagina__pie a:hover { color: var(--sc-accent); }
/* La cinta, quieta: fondo oscuro con tres carriles dorados dibujados en CSS. */
.pagina__cinta { position: fixed; left: 0; right: 0; bottom: 0; height: var(--tape-h); background: #1a1714; z-index: 5;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, transparent 15px, rgba(201,162,74,.5) 15px 16px, transparent 16px),
    linear-gradient(to bottom, transparent 27px, rgba(201,162,74,.92) 27px 28.2px, transparent 28.2px),
    linear-gradient(to bottom, transparent 39px, rgba(201,162,74,.5) 39px 40px, transparent 40px); }
.pagina__cinta::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--sc-accent); transform: translateX(-50%); }
@media (max-width: 560px) { .pagina__cab { padding-bottom: 1rem; } .pagina__etiqueta { width: 100%; } }
/* Listas del panel del encargado: filas con hairline, nada de tarjetas. */
.lista { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.lista__fila { border-bottom: 1px solid var(--sc-hairline); }
.lista__fila > a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.1rem; padding: 1rem .2rem; text-decoration: none; }
.lista__fila > a:hover { background: var(--sc-surface); }
.lista__fila > a:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: -3px; }
.lista__fila strong { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-base); }
.lista__dato { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.lista--mensajes .lista__fila { padding: .7rem .2rem; font-size: var(--sc-t-sm); }
.estado { margin-left: auto; font-size: var(--sc-t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); border: 1px solid var(--sc-hairline-strong); border-radius: 999px; padding: .2rem .6rem; }
.estado--pendiente { color: var(--sc-accent); border-color: currentColor; }

/* ── Pestañas del colofón: sesión y visita, un formulario a la vez ───────────── */
.reqs { min-width: 0; }
.ancla { display: block; height: 0; scroll-margin-top: 30vh; }
.tabs { display: flex; gap: 0; margin: 0 0 1.8rem; border-bottom: 1px solid var(--sc-hairline-strong); }
.tabs__b { font: inherit; font-weight: 600; font-size: var(--sc-t-base); color: var(--sc-ink-soft); background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .7rem 0 .8rem; margin-right: 2rem; cursor: pointer;
  transition: color .15s, border-color .15s; }
.tabs__b:last-child { margin-right: 0; }
.tabs__b:hover { color: var(--sc-ink); }
.tabs__b[aria-selected="true"] { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
.tabs__b:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; }
.tabs__panel:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 4px; }
.tabs__intro { margin: 0 0 1.4rem; max-width: 46ch; }
@media (max-width: 420px) { .tabs__b { margin-right: 1.2rem; font-size: var(--sc-t-sm); } }

/* Un error por campo, debajo del campo que lo produce. */
.req__err { display: block; font-size: var(--sc-t-xs); font-weight: 500; color: var(--sc-accent); }
fieldset.is-mal > .req__err, .req__row.is-mal > .req__err { grid-column: 1 / -1; }
.is-mal > input, .is-mal > textarea, .req input[aria-invalid="true"], .req textarea[aria-invalid="true"] { border-color: var(--sc-accent); }
.is-mal > legend { color: var(--sc-accent); }

/* El folio se retira mientras el visitante baja en móvil (folioPaso en tape.js), para no tapar
   el título del capítulo siguiente. Va al final del archivo a propósito: el reveal de carga de
   arriba redefine la transición del folio y, si esto fuera antes, la perdería. */
@media (max-width: 1100px) {
  .folio { transition: transform .38s var(--sc-ease-out), opacity .8s ease .9s, background .3s; }
  html.is-ready .folio.is-away { transform: translateY(calc(100% + var(--tape-h) + 1.4rem)); pointer-events: none; }
  .folio.is-away { transform: translateY(calc(100% + var(--tape-h) + 1.4rem)); pointer-events: none; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) { .folio { transition: none; } }