/* The Studio · public pages v5 (1-nov-2026). A studio with the lights on: a warm-neutral paper page where the footage is the only colour.
   One family (Geist) at every size, hierarchy by size and weight; near-black ink, no chromatic accent outside the live dot; hairlines for
   structure, one soft tinted shadow for the things that float (the wall cards, the panel window, the form card). The product UI stays dark
   inside its window. Class names of the account, connect, upload and form pages are kept so nothing else changes. */
:root {
  --bg: #f4f4f2; --bg-2: #ecece9; --bg-3: #e3e3df; --bg-4: #d7d7d2; --white: #fcfcfb;
  --ink: #131416; --ink-2: #494b51; --ink-3: #797c84; --ink-4: #a7aab0;
  --line: rgba(19,20,22,.09); --line-2: rgba(19,20,22,.16); --line-3: rgba(19,20,22,.30);
  --night: #0c0f13; --night-2: #141820; --night-3: #1c212b; --night-ink: #eef1f5; --night-ink-2: #a6afbc; --night-line: rgba(255,255,255,.09);
  --live: #15b37a; --live-bg: rgba(21,179,122,.13); --live-ink: #0d7a53; --live-on-night: #7fe3bb;
  --warn: #b7791a; --warn-bg: rgba(183,121,26,.12); --bad: #cf4f43; --bad-bg: rgba(207,79,67,.10);
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px; --s10: 160px;
  --r: 10px; --r-lg: 16px; --r-xl: 24px; --measure: 60ch; --wrap: 1200px;
  --sombra: 0 1px 2px rgba(19,20,22,.05), 0 24px 48px -24px rgba(19,20,22,.22);
  --sombra-2: 0 2px 4px rgba(19,20,22,.06), 0 48px 96px -32px rgba(19,20,22,.35);
  --z-nav: 20; --z-zoom: 40;
  color-scheme: light;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg) }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16.5px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; font-feature-settings: "ss01", "cv11" }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; transition: text-decoration-color 150ms ease, color 150ms ease }
a:hover { text-decoration-color: var(--ink) }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px }
img, video { display: block; max-width: 100%; height: auto }
::selection { background: var(--ink); color: var(--bg) }
.wrap { width: min(var(--wrap), calc(100% - 2 * var(--s5))); margin-inline: auto }
.mono { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums }
.salta { position: absolute; left: -9999px; top: var(--s3); background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--r); z-index: 50; text-decoration: none; font-weight: 500 }
.salta:focus { left: var(--s3) }
[hidden] { display: none !important }

/* type: five sizes; weight and colour do the rest */
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.03em; margin: 0; text-wrap: balance; color: var(--ink) }
h1 { font-size: clamp(44px, 6.4vw, 94px); line-height: .98; letter-spacing: -0.045em }
h2 { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.04; letter-spacing: -0.035em }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.015em }
h4 { font-size: 18px; line-height: 1.3; letter-spacing: -0.012em }
p { margin: 0; max-width: var(--measure) }
.lead { font-size: clamp(17.5px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-2) }
.small { font-size: 14px; color: var(--ink-3) }
.etq { font: 500 13px/1.3 var(--sans); color: var(--ink-3) }
.nota { color: var(--ink-3) }
.ok { color: var(--live-ink) } .mal { color: var(--bad) }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums }

/* header: a floating bar that stays with you */
.top { position: sticky; top: var(--s3); z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); height: 56px; margin: var(--s3) 0 0; padding: 0 var(--s2) 0 var(--s4);
  background: rgba(252,252,251,.78); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 1px 2px rgba(19,20,22,.04), 0 10px 30px -18px rgba(19,20,22,.25) }
.marca { font-weight: 600; font-size: 16.5px; letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; color: var(--ink) }
.marca svg { width: 22px; height: 22px; display: block }
.top nav { display: flex; gap: 2px; align-items: center }
.top nav a { text-decoration: none; color: var(--ink-2); font-size: 14.5px; font-weight: 500; padding: 8px 12px; border-radius: 999px; transition: color 150ms ease, background-color 150ms ease }
.top nav a:hover { color: var(--ink); background: var(--bg-2) }
.top nav a.aqui { color: var(--ink) }
.top nav a.siempre { margin-left: var(--s2) }
.top nav a.btn { padding: 9px 14px; margin-left: var(--s1); color: var(--bg) } .top nav a.btn:hover { color: var(--bg) }

/* buttons: ink on paper */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 13px 20px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font: 500 15.5px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease, color 150ms ease }
.btn:hover { background: #000; border-color: #000; color: #fff } .btn:active { transform: translateY(1px) scale(.99) }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; cursor: progress; transform: none }
.btn-2 { background: transparent; color: var(--ink); border-color: var(--line-3) } .btn-2:hover { background: var(--bg-2); border-color: var(--ink-3); color: var(--ink) }
.btn-s { padding: 9px 14px; font-size: 14px } .btn-w { width: 100% }
.btn svg { width: 16px; height: 16px }

/* sections */
section { padding: var(--s9) 0 }
section + section { border-top: 1px solid var(--line) }
.cab { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s6) var(--s7); align-items: end; margin-bottom: var(--s7) }
.cab .lead { max-width: 50ch }
.cab .etq { margin-bottom: var(--s3) }

/* hero: words in the middle, the wall right under them */
.hero { padding: clamp(44px, 7vw, 92px) 0 var(--s5); text-align: center; display: grid; justify-items: center }
.hero h1 { max-width: 13ch }
.hero .lead { margin-top: var(--s5); max-width: 58ch }
.acciones { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; margin-top: var(--s6) }
.hero .nota { margin-top: var(--s4); font-size: 14px }

/* the wall: two rows of vertical clips that drift, each one unique; sound on request */
.pared { position: relative; margin: 0 calc(50% - 50vw); padding: var(--s4) 0 var(--s4); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) }
.filas { display: grid; gap: var(--s4); perspective: 1600px }
.fila { display: flex; gap: var(--s4); width: max-content; padding-left: var(--s4); will-change: transform; animation: deriva 64s linear infinite alternate }
.fila.b { animation-name: deriva-b; animation-duration: 76s }
.fila:hover, .pared.sonando .fila, .pared.quieta .fila { animation-play-state: paused }
.carta { position: relative; width: 236px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: var(--bg-4); box-shadow: var(--sombra); isolation: isolate; flex: none; transition: transform 300ms ease, box-shadow 300ms ease }
.carta:hover, .carta:focus-within { transform: translateY(-4px); box-shadow: var(--sombra-2) }
.carta video, .carta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.carta .sonido { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(12,15,19,.55); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 200ms ease, background-color 150ms ease, transform 120ms ease }
.carta:hover .sonido, .carta .sonido:focus-visible, .carta .sonido[aria-pressed="true"] { opacity: 1 }
.sonido:hover { background: rgba(12,15,19,.8) } .sonido:active { transform: scale(.96) }
.sonido svg { width: 18px; height: 18px } .sonido .on { display: none } .sonido[aria-pressed="true"] .on { display: block } .sonido[aria-pressed="true"] .off { display: none }
.sonido[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff }
@media (hover: none) { .carta .sonido { opacity: 1 } }
.pared-nota { display: flex; justify-content: center; gap: var(--s3); margin-top: var(--s4); color: var(--ink-3); font-size: 14px; text-align: center }
@keyframes deriva { from { transform: translateX(0) } to { transform: translateX(calc(-100% + 100vw)) } }
@keyframes deriva-b { from { transform: translateX(calc(-100% + 100vw)) } to { transform: translateX(0) } }

/* a product window: the panel at work, as a recording; the chapters under it follow the video and seek it */
.ventana { margin-top: var(--s2); border-radius: 14px; background: var(--night); border: 1px solid rgba(255,255,255,.1); box-shadow: var(--sombra-2); overflow: hidden }
.ventana .barra { display: flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s4); border-bottom: 1px solid var(--night-line); background: var(--night-2) }
.ventana .barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--night-3); display: inline-block }
.ventana .barra span { margin-left: var(--s3); flex: 1; max-width: 420px; height: 24px; border-radius: 7px; background: var(--night); color: var(--night-ink-2); font: 12.5px/24px var(--sans); padding: 0 var(--s3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ventana img, .ventana video { width: 100%; height: auto; display: block; background: var(--night) }
.hitos { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3) }
.hitos li { position: relative; padding-top: var(--s3); cursor: pointer; color: var(--ink-3); transition: color 200ms ease; min-width: 0 }
.hitos li i { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden }
.hitos li i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: var(--ink); transition: width 120ms linear }
.hitos li b { display: block; font-weight: 500; font-size: 14.5px; color: var(--ink-2); transition: color 200ms ease } .hitos li span { display: block; font-size: 13px; line-height: 1.4; margin-top: 3px; color: var(--ink-4); transition: color 200ms ease }
.hitos li.aqui b { color: var(--ink) } .hitos li.aqui span { color: var(--ink-3) } .hitos li:hover b { color: var(--ink) }
.hitos li.vista i::after { width: 100% }

/* how it works: tiles of different weight, each with the real screen it talks about */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s4) }
.tile { grid-column: span 2; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s5); display: flex; flex-direction: column; min-width: 0 }
.tile .ilu { margin-bottom: var(--s5) }
.tile.w3 { grid-column: span 3 } .tile.w4 { grid-column: span 4 }
.tile h3 { margin: 0 } .tile h3 small { display: block; font: 500 13px/1.4 var(--sans); color: var(--ink-3); margin-bottom: var(--s2); letter-spacing: 0 }
.tile p { font-size: 15px; color: var(--ink-2); margin-top: var(--s2) }
.ilu { border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); min-height: 200px; padding: var(--s4); display: grid; align-content: center; gap: var(--s3); overflow: hidden; position: relative; isolation: isolate }
.ilu.oscura { background: var(--night); border-color: rgba(255,255,255,.08); color: var(--night-ink) }
.ui-fila { display: flex; align-items: center; gap: var(--s3); min-width: 0; flex-wrap: wrap } .ui-fila > * { min-width: 0 }
.ui-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); font-size: 13.5px; color: var(--ink-2); display: grid; gap: 4px; min-width: 0 }
.ui-card b { display: block; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .ui-card > div { min-width: 0 }
.oscura .ui-card { background: var(--night-2); border-color: var(--night-line); color: var(--night-ink-2) } .oscura .ui-card b { color: var(--night-ink) }
.ui-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 500 12.5px/1.3 var(--sans); border: 1px solid var(--line-2); color: var(--ink-2); background: var(--white); white-space: nowrap }
.ui-chip.ok { color: var(--live-ink); border-color: rgba(21,179,122,.4); background: var(--live-bg) } .ui-chip.ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live) }
.ui-chip.mal { color: var(--bad); border-color: rgba(207,79,67,.4); background: var(--bad-bg) }
.oscura .ui-chip { background: var(--night-2); border-color: var(--night-line); color: var(--night-ink-2) } .oscura .ui-chip.ok { color: var(--live-on-night); border-color: rgba(127,227,187,.35); background: rgba(21,179,122,.16) }
.ui-bubble { max-width: 86%; padding: var(--s3) var(--s4); border-radius: 16px; font-size: 14px; line-height: 1.45; background: var(--white); border: 1px solid var(--line); color: var(--ink) }
.ui-bubble.yo { margin-left: auto; background: var(--ink); color: var(--bg); border-color: var(--ink); border-bottom-right-radius: 6px } .ui-bubble.el { border-bottom-left-radius: 6px }
.ui-link { display: grid; grid-template-columns: 44px 1fr; gap: var(--s3); align-items: center } .ui-link i { width: 44px; height: 44px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3) } .ui-link svg { width: 20px; height: 20px }
.ui-fotos { display: flex; gap: var(--s2) } .ui-fotos i { width: 54px; height: 54px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); display: block; position: relative }
.ui-fotos i::after { content: ""; position: absolute; inset: 10px; border-radius: 4px; background: var(--bg-3) }
.ui-file { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--s3); align-items: center } .ui-file i { width: 44px; height: 44px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3) } .ui-file svg { width: 20px; height: 20px }
.ui-check { width: 22px; height: 22px; border-radius: 50%; background: var(--live); color: #fff; display: inline-grid; place-items: center; flex: none } .ui-check svg { width: 12px; height: 12px }
.ui-tira { display: flex; gap: var(--s2); align-items: flex-start } .ui-tira figure { margin: 0; flex: 1; min-width: 0; display: grid; gap: 6px }
.ui-tira img { width: 100%; aspect-ratio: 9 / 13; object-fit: cover; border-radius: 8px; border: 2px solid transparent }
.ui-tira figure.ok img { border-color: var(--live) } .ui-tira figure.mal img { border-color: var(--bad) }
.ui-tira figcaption { font-size: 12px; color: var(--ink-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .ui-tira figure.ok figcaption { color: var(--live-ink) } .ui-tira figure.mal figcaption { color: var(--bad) }
.ui-master { display: grid; grid-template-columns: 96px 1fr; gap: var(--s4); align-items: center } .ui-master img { width: 96px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px }
.ui-kv { display: grid; gap: 3px; font-size: 13.5px; color: var(--ink-2) } .ui-kv b { color: var(--ink); font-weight: 500; font-size: 15px }

/* what stays right: pairs of frames from the same ad, scenes apart */
.pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--s6) }
.par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); align-items: start }
.par img { width: 100%; aspect-ratio: 9 / 12; object-fit: cover; border-radius: var(--r-lg); background: var(--bg-3) }
.par-txt { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s2) var(--s5); margin-top: var(--s3); align-items: start }
.par-txt h4 { font-size: 19px } .par-txt p { font-size: 15px; color: var(--ink-2) }
.par .fotos3 { grid-column: 1 / -1; aspect-ratio: 2.05 / 1.33; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); display: grid; place-items: center; padding: var(--s5) }
.fotos3 .ui-fotos i { width: 72px; height: 72px; border-radius: 12px } .fotos3 .ui-fotos i:nth-child(2) { transform: translateY(-10px) } .fotos3 .ui-fotos i:nth-child(3) { transform: translateY(6px) }
.fotos3 .ui-chip { margin-top: var(--s4) }

/* two columns, lists, plan, faq, cta */
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6) }
.lista { list-style: none; margin: var(--s5) 0 0; padding: 0; border-top: 1px solid var(--line-2) }
.lista li { padding: var(--s4) 0; border-bottom: 1px solid var(--line); font-size: 16.5px; font-weight: 500 } .lista li span { display: block; color: var(--ink-3); font-size: 15px; margin-top: 2px; font-weight: 400 }
.sheet { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--white); padding: var(--s6) }
.sheet + .sheet { margin-top: var(--s5) } .dos > .sheet { margin-top: 0 } .sheet h3 { margin-bottom: var(--s3) } .sheet > p { font-size: 15.5px; color: var(--ink-2) }
.sheet .acciones { justify-content: flex-start; margin-top: var(--s5) }
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5) var(--s8); margin-top: var(--s6) } .faq div { border-top: 1px solid var(--line-2); padding-top: var(--s4) } .faq h4 { margin-bottom: var(--s2) } .faq p { font-size: 15.5px; color: var(--ink-2) }
.cta { text-align: center; display: grid; justify-items: center; padding: var(--s6) 0 }
.cta h2 { max-width: 16ch } .cta .lead { margin-top: var(--s4); max-width: 46ch }
footer { padding: var(--s6) 0 var(--s7); color: var(--ink-3); font-size: 14px; display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; border-top: 1px solid var(--line) }
footer nav { display: flex; gap: var(--s4); flex-wrap: wrap } footer a { text-decoration: none; color: var(--ink-3) } footer a:hover { color: var(--ink) }

/* forms and cards (start, sign in, request, forgot, reset, account) */
.tarjeta { max-width: 480px; margin: var(--s8) auto var(--s10); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s6); box-shadow: var(--sombra) }
.tarjeta h1 { font-size: clamp(32px, 4vw, 40px); letter-spacing: -0.035em } .tarjeta .lead { margin-top: var(--s3); font-size: 17px }
form.f { margin-top: var(--s5) }
label { display: block; font-size: 14px; font-weight: 500; color: var(--ink-2); margin: var(--s4) 0 var(--s2) } label small { color: var(--ink-3); font-weight: 400 }
input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--white); color: var(--ink); font: 16px/1.4 var(--sans); transition: border-color 150ms ease, box-shadow 150ms ease }
textarea { min-height: 96px; resize: vertical }
input:hover, select:hover, textarea:hover { border-color: var(--line-3) }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(19,20,22,.10) }
input:user-invalid, textarea:user-invalid { border-color: var(--bad) }
input::placeholder, textarea::placeholder { color: var(--ink-4) }
input[type="file"] { padding: 10px; background: var(--bg) }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23797c84' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px }
form .btn { margin-top: var(--s5) } .f .fila2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4) }
.aviso { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r); font-size: 15px; border: 1px solid transparent }
.aviso.error, .error { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--bad-bg); color: #9b3a30; font-size: 15px; border: 1px solid rgba(207,79,67,.3) }
.aviso.ok { background: var(--live-bg); color: var(--live-ink); border-color: rgba(21,179,122,.3) } .aviso.warn { background: var(--warn-bg); color: #7d5410; border-color: rgba(183,121,26,.3) }
.ayuda { margin-top: var(--s5); font-size: 14px; color: var(--ink-3) } .ayuda a { color: var(--ink-2) }
details summary { color: var(--ink-3) }

/* connect */
.conecta { max-width: 820px; margin: var(--s8) auto var(--s10) }
.conecta h1 { font-size: clamp(34px, 4.4vw, 52px) }
.conecta .lead { margin-top: var(--s4) }
.vias { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); margin-top: var(--s6) }
.via { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); background: var(--white); min-width: 0 }
.via h3 { margin: var(--s3) 0 var(--s2) } .via ol { padding-left: 20px; margin: var(--s3) 0 0; font-size: 15px; color: var(--ink-2) } .via li { margin: 6px 0 }
.orden { margin-top: var(--s3); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: start }
pre.cmd { margin: 0; padding: var(--s4); background: var(--night); color: var(--night-ink); border-radius: var(--r); font: 13px/1.55 var(--mono); white-space: pre-wrap; word-break: break-all; min-width: 0 }
.estado { margin-top: var(--s6); padding: var(--s4) var(--s5); border-radius: var(--r-lg); border: 1px solid var(--line-2); display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: center; transition: background-color 250ms ease, border-color 250ms ease; background: var(--white) }
.estado i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-4); display: inline-block; transition: background-color 250ms ease }
.estado b { display: block; font-weight: 600 } .estado span { font-size: 14px; color: var(--ink-3) }
.estado.ok { background: var(--live-bg); border-color: rgba(21,179,122,.5) } .estado.ok i { background: var(--live) } .estado.ok span { color: var(--live-ink) }
.estado.espera i { animation: late 1.6s ease-in-out infinite }
@keyframes late { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
.conecta .etq { margin-bottom: var(--s3) }
.pestanas { display: flex; gap: var(--s2); margin-top: var(--s6); border-bottom: 1px solid var(--line); flex-wrap: wrap }
.pestana { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 12px 4px; font: 500 16px/1.2 var(--sans); color: var(--ink-3); cursor: pointer; transition: color 150ms ease, border-color 150ms ease }
.pestana:hover { color: var(--ink) } .pestana.aqui { color: var(--ink); border-bottom-color: var(--ink) }
.via-panel { margin-top: var(--s5) }
.guia { list-style: none; counter-reset: paso; padding: 0; margin: 0; display: grid; gap: var(--s3); max-width: 760px }
.guia li { counter-increment: paso; position: relative; padding: var(--s4) var(--s5) var(--s4) 64px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); font-size: 16px; line-height: 1.55; color: var(--ink-2) }
.guia li b { color: var(--ink); font-weight: 600 }
.guia li::before { content: counter(paso); position: absolute; left: 20px; top: 18px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 600 13px/28px var(--sans); text-align: center }
.guia .orden { margin: var(--s3) 0 var(--s2) }
.guia code, .subida .ayuda code { font: 14px/1 var(--mono); background: var(--bg-2); padding: 2px 6px; border-radius: 4px; color: var(--ink) }

/* account area */
.cuenta { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s7); margin: var(--s6) 0 var(--s10); align-items: start }
.cuenta nav { position: sticky; top: 92px; display: grid; gap: 2px } .cuenta nav a { text-decoration: none; padding: 9px 12px; border-radius: var(--r); color: var(--ink-2); font-size: 15px } .cuenta nav a:hover { background: var(--bg-2); color: var(--ink) } .cuenta nav a.aqui { background: var(--ink); color: var(--bg) }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: var(--s2) var(--s4); font-size: 15px; margin-top: var(--s4) } .kv dt { color: var(--ink-3) } .kv dd { margin: 0; word-break: break-word } .kv dd .mono { font-size: 13px }
.tabla { width: 100%; border-collapse: collapse; margin-top: var(--s4); font-size: 15px } .tabla th, .tabla td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line) } .tabla th { font-size: 12.5px; color: var(--ink-3); font-weight: 500 }
.tabla form { display: inline } .tabla td form .btn-s { padding: 5px 10px; font-size: 13px }
.chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 500 12.5px/1.3 var(--sans); border: 1px solid var(--line-2); color: var(--ink-2); background: var(--white) }
.chip.ok { background: var(--live-bg); border-color: rgba(21,179,122,.45); color: var(--live-ink) } .chip.warn { background: var(--warn-bg); border-color: rgba(183,121,26,.45); color: #7d5410 } .chip.off { color: var(--ink-3) }
.setup fieldset { border: 0; padding: 0; margin: var(--s6) 0 0 } .setup legend { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; padding: 0; margin-bottom: var(--s2) } .setup .nota { font-size: 14px; color: var(--ink-3) }
.prosa { max-width: 720px; margin: var(--s8) auto var(--s10) } .prosa h1 { font-size: clamp(34px, 4.4vw, 48px) } .prosa h2 { font-size: 26px; margin-top: var(--s7) } .prosa h3 { margin-top: var(--s6) } .prosa p, .prosa li { margin-top: var(--s3); color: var(--ink-2); max-width: 70ch } .prosa ul { padding-left: 20px }
.quien { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg) }
.quien i { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font: 600 15px/1 var(--sans); font-style: normal; flex: none }
.quien div { display: grid; min-width: 0 } .quien b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .quien span { font-size: 13px; color: var(--ink-3) }
.quien .btn { margin-left: auto }
.fuera { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

/* upload page */
.subida { max-width: 640px }
.zona { margin-top: var(--s6); padding: var(--s8) var(--s5); border: 2px dashed var(--line-3); border-radius: var(--r-lg); background: var(--white); text-align: center; cursor: pointer; display: grid; gap: var(--s2); transition: border-color 150ms ease, background-color 150ms ease }
.zona b { font-size: 20px } .zona span { color: var(--ink-3); font-size: 15px }
.zona:hover, .zona.sobre, .zona:focus-visible { border-color: var(--ink); background: var(--bg) } .zona.ocupada { pointer-events: none; opacity: .6 }
.progreso { margin-top: var(--s4); display: grid; gap: var(--s2) } .progreso .barra { height: 8px; border-radius: 999px; background: var(--bg-3); overflow: hidden }
.progreso .barra i { display: block; height: 100%; width: 0; background: var(--live); transition: width 200ms ease } .progreso span { font: 13px/1.4 var(--mono); color: var(--ink-3) }

/* motion: one entrance for the hero; the wall drifts; nothing else moves on its own */
.hero h1, .hero .lead, .hero .acciones, .hero .nota, .pared { opacity: 0; transform: translateY(12px); transition: opacity 600ms ease-out, transform 600ms ease-out }
.hero .lead { transition-delay: 80ms } .hero .acciones { transition-delay: 150ms } .hero .nota { transition-delay: 200ms } .pared { transition-delay: 260ms }
body.listo .hero h1, body.listo .hero .lead, body.listo .hero .acciones, body.listo .hero .nota, body.listo .pared { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .hero h1, .hero .lead, .hero .acciones, .hero .nota, .pared { opacity: 1; transform: none; transition: none }
  .fila { animation: none } .pared { overflow-x: auto; -webkit-mask-image: none; mask-image: none } .estado.espera i { animation: none }
  .btn, input, .estado, .carta, .top nav a { transition: none }
}

/* narrow screens: nothing grows past the viewport */
.cab > *, .dos > *, .vias > *, .faq > *, .cuenta > *, .orden > *, .bento > *, .pares > *, .par > * { min-width: 0 }
@media (max-width: 1040px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)) } .tile, .tile.w3, .tile.w4 { grid-column: span 1 } .tile.w4 { grid-column: span 2 }
}
@media (max-width: 860px) {
  .cab, .dos, .vias, .faq, .cuenta, .pares { grid-template-columns: minmax(0, 1fr); gap: var(--s6) }
  .cuenta nav { position: static; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) }
  .carta { width: 190px; border-radius: 14px }
}
@media (max-width: 600px) {
  body { font-size: 16px } section { padding: var(--s8) 0 }
  .top { height: 52px; top: var(--s2); margin-top: var(--s2); padding-left: var(--s3) } .top nav a:not(.btn):not(.siempre) { display: none } .top nav a.btn { padding: 8px 12px; font-size: 14px } .marca { font-size: 16px }
  h1 { font-size: clamp(38px, 11.5vw, 54px) } .hero { padding-top: var(--s7) } .hero .acciones .btn { width: 100% } .hero .lead { font-size: 17px }
  .carta { width: 150px; border-radius: 12px } .filas { gap: var(--s3) } .fila { gap: var(--s3) }
  .bento { grid-template-columns: minmax(0, 1fr) } .tile.w4 { grid-column: span 1 } .ilu { min-height: 160px }
  .hitos { display: flex; overflow-x: auto; gap: var(--s3); scrollbar-width: none; margin-inline: calc(-1 * var(--s5)); padding-inline: var(--s5) } .hitos::-webkit-scrollbar { display: none } .hitos li { flex: none; width: 118px } .hitos li b { font-size: 13.5px } .hitos li span { font-size: 12px }
  .orden { grid-template-columns: minmax(0, 1fr) } .estado { grid-template-columns: auto 1fr } .estado .btn { grid-column: 1 / -1 }
  .f .fila2 { grid-template-columns: minmax(0, 1fr) } .kv { grid-template-columns: minmax(0, 1fr) }
  .tabla { display: block; overflow-x: auto; white-space: nowrap }
  .guia li { padding-left: 52px; padding-right: var(--s4) } .guia li::before { left: 14px } .pestana { font-size: 15px }
  .tarjeta { padding: var(--s5); margin-top: var(--s6) } .par-txt { grid-template-columns: minmax(0, 1fr) }
  .ilu.oscura .ui-fila:first-child { flex-direction: column; align-items: stretch } .ilu.oscura .ui-fila:first-child > svg { transform: rotate(90deg); margin: -4px auto }
}
@media (max-width: 420px) { .top nav a.siempre { display: none } }