/* ============================================================
NOTAFIEL — visual system v2 · "warm minimal + soft glass"
Redesign 2026-07 (branch redesign/v2-visual).
One source of truth: tokens first, primitives second, screens third.
Functional selectors (capture.js + inline scripts) keep their names;
composition and styling are new. Admin console re-tokened at the end.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Instrument+Sans:wght@400;500;600&display=swap');
/* ---------------------------------------------------------------
1 · TOKENS
--------------------------------------------------------------- */
:root{
/* color */
--canvas:#EFEAE3; /* app background — warm bone */
--canvas-deep:#E7E1D8; /* section alternation, wells */
--surface:#F8F5F0; /* cards — warm off-white, never #FFF */
--surface-glass:rgba(248,245,240,.62); /* frosted panels */
--ink:#1C1A17; /* primary text */
--ink-soft:#57534B; /* secondary text */
--ink-faint:#8B857B; /* tertiary / labels / meta only */
--line:rgba(28,26,23,.08); /* hairlines */
--line-strong:rgba(28,26,23,.16); /* control borders */
--dark:#1E2A38; /* inverted surface — deep slate navy */
--dark-2:#2B3A4C; /* navy hover/lift */
--dark-ink:#EFEAE3; /* text on dark */
--accent:#C97B4A; /* terracotta-amber — the ONLY accent */
--accent-ink:#8F4E26; /* accent, dark enough for small text */
--accent-soft:#E8C9B0; /* accent tint: fills, rings, badges */
--accent-bg:#F3E4D6; /* accent wash for wells */
--positive:#1E4D3B; /* the certificados family green — included/success only */
--positive-bg:#DDE9E3;
--danger-ink:#9A4B3A; /* red-brown text accent (modal copy only) */
/* shape · depth · glass */
--radius-sm:14px; --radius-md:20px; --radius-lg:28px; --radius-xl:36px;
--shadow-1:0 1px 2px rgba(28,26,23,.04), 0 8px 24px rgba(28,26,23,.06);
--shadow-2:0 2px 4px rgba(28,26,23,.06), 0 16px 48px rgba(28,26,23,.10);
--blur-glass:blur(24px) saturate(1.4);
--glass-edge:rgba(255,255,255,.5);
/* type */
--font-ui:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-display:'Fraunces', Georgia, 'Times New Roman', serif;
/* status hues (semantic, warm-harmonised; never decorative) */
--st-pending:#C2761B; --st-pending-bg:#F4E6CE; --st-pending-ink:#7A4A11;
--st-review:#54718A; --st-review-bg:#E3EBF1; --st-review-ink:#28394A;
--st-ready:var(--positive); --st-ready-bg:var(--positive-bg); --st-ready-ink:#1E4D3B;
/* ---- legacy aliases (old rules / inline styles keep resolving) ---- */
--salt:var(--canvas); --salt-2:var(--canvas-deep); --paper:var(--surface); --titlebar:var(--canvas-deep);
--line-2:var(--line-strong); --line-3:rgba(28,26,23,.24);
--ink-2:var(--ink-soft); --label:var(--ink-faint); --hint:var(--ink-faint); --text-2:var(--ink-soft);
--olive:var(--positive); --olive-soft:var(--positive); --olive-bg:var(--positive-bg); --coffee:var(--accent-ink);
--amber:var(--st-pending); --amber-ink:var(--st-pending-ink); --amber-bg:var(--st-pending-bg);
--amber-bg-soft:#F8EEDD; --amber-line:#E8D6B4;
--radius:var(--radius-md);
--family-actas-stroke:#A8593C; --family-actas-tint:var(--canvas-deep); --family-actas-ink:#69331F;
--family-comunicaciones-stroke:#54718A; --family-comunicaciones-tint:var(--canvas-deep); --family-comunicaciones-ink:#28394A;
--family-certificados-stroke:#45806F; --family-certificados-tint:var(--canvas-deep); --family-certificados-ink:#1F4238;
--family-informes-stroke:#7C4150; --family-informes-tint:var(--canvas-deep); --family-informes-ink:#48212C;
--family-encargos-stroke:#B0872F; --family-encargos-tint:var(--canvas-deep); --family-encargos-ink:#6B5119;
}
/* warm dark theme — the Ajustes toggle keeps working; same one-accent discipline */
:root[data-theme="dark"]{
color-scheme:dark;
--canvas:#151A21; --canvas-deep:#10141B; --surface:#1D242D;
--surface-glass:rgba(29,36,45,.62);
--ink:#EAE7E1; --ink-soft:#B2AFa7; --ink-faint:#7F7E76;
--line:rgba(234,231,225,.09); --line-strong:rgba(234,231,225,.18); --line-3:rgba(234,231,225,.26);
--dark:#0A0F16; --dark-2:#18222E; --dark-ink:#EAE7E1;
--accent:#D28A58; --accent-ink:#E0A97F; --accent-soft:#7A4E2C; --accent-bg:#39281B;
--positive:#7FB49A; --positive-bg:#1F3129;
--shadow-1:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
--shadow-2:0 2px 4px rgba(0,0,0,.35), 0 16px 48px rgba(0,0,0,.5);
--glass-edge:rgba(255,255,255,.08);
--st-pending:#D98A2B; --st-pending-bg:#3A2F18; --st-pending-ink:#E6AC5E;
--st-review:#8FA9BF; --st-review-bg:#232E38; --st-review-ink:#C6D6E3;
--st-ready-ink:#A6CFBB;
--amber-bg-soft:#2C2614; --amber-line:#4D3F22;
--danger-ink:#D08A78;
--family-actas-stroke:#CE9070; --family-actas-ink:#EFD8CA;
--family-comunicaciones-stroke:#8FA9BF; --family-comunicaciones-ink:#D8E4EE;
--family-certificados-stroke:#7FAB9B; --family-certificados-ink:#D7E8E0;
--family-informes-stroke:#B27C8C; --family-informes-ink:#EED9E0;
--family-encargos-stroke:#CFA95C; --family-encargos-ink:#EFE2C4;
}
/* ---------------------------------------------------------------
2 · BASE
--------------------------------------------------------------- */
*{ box-sizing:border-box; }
html{ height:100%; }
body{ margin:0; font-family:var(--font-ui); font-size:14px; color:var(--ink); background:var(--canvas);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
font-feature-settings:'ss01' on, 'cv01' on; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
img{ max-width:100%; }
::selection{ background:var(--accent-soft); color:var(--ink); }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; border-radius:4px; }
.skip-link{ position:absolute; left:12px; top:-48px; z-index:100; background:var(--dark); color:var(--dark-ink);
padding:9px 16px; border-radius:999px; font-size:13px; transition:top .15s ease; }
.skip-link:focus{ top:12px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
input, textarea, select{ font-family:var(--font-ui); color:var(--ink); }
input::placeholder, textarea::placeholder{ color:var(--ink-faint); }
/* global text inputs: warm surface, soft radius, terracotta focus — no blue anywhere */
.obra-field__input, .field-row__input, .gap__input, .looptbl input, .looptbl textarea, .login__input,
.doc-rename__input, .set-field__input, .obra-rename__input, .nav__sub-newinput,
.obra-data__form input, .name-field input, .ainput, .aselect, .atextarea, .tune-input{
background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
transition:border-color .15s ease, box-shadow .15s ease; }
.obra-field__input:focus, .field-row__input:focus, .gap__input:focus, .looptbl input:focus, .looptbl textarea:focus,
.login__input:focus, .doc-rename__input:focus, .set-field__input:focus, .obra-rename__input:focus,
.nav__sub-newinput:focus, .obra-data__form input:focus, .ainput:focus, .atextarea:focus, .aselect:focus{
outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
/* page entrance: main content fades + rises (250ms) */
@media (prefers-reduced-motion: no-preference){
.main__inner, .md, .app--tool > form, .app--tool > .result, .app--tool > .stage.proc{
animation:page-in .25s ease both; }
@keyframes page-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
}
/* ---------------------------------------------------------------
3 · SIGNATURE UTILITIES — eyebrow, display type, orbs, glass
--------------------------------------------------------------- */
.eyebrow{ display:flex; align-items:center; gap:10px; font-size:11.5px; letter-spacing:.08em;
text-transform:uppercase; color:var(--ink-faint); font-weight:500; margin-bottom:10px; }
.eyebrow::after{ content:""; width:24px; height:1px; background:var(--line-strong); }
.page-title{ font-family:var(--font-display); font-weight:500; font-size:clamp(30px, 3.6vw, 48px);
line-height:1.05; letter-spacing:-.015em; color:var(--ink); margin:0; }
.page-sub{ font-size:15.5px; color:var(--ink-soft); margin:12px 0 40px; line-height:1.55; max-width:640px; }
/* the accent orb — one soft light-leak per screen, positioned by the surface that owns it */
.orb-host{ position:relative; isolation:isolate; }
.orb-host::before{ content:""; position:absolute; z-index:-1; width:520px; height:520px; border-radius:50%;
background:radial-gradient(circle, var(--accent) 0%, transparent 62%); opacity:.16; filter:blur(80px);
top:-180px; right:-140px; pointer-events:none; }
/* glass panel primitive */
.glass{ background:var(--surface-glass); -webkit-backdrop-filter:var(--blur-glass); backdrop-filter:var(--blur-glass);
border:1px solid var(--glass-edge); box-shadow:var(--shadow-1); }
/* ---------------------------------------------------------------
4 · APP SHELL — dark rail + warm canvas
--------------------------------------------------------------- */
/* dvh, not vh: on a phone browser 100vh is the height with the toolbars RETRACTED, so a
100vh shell is taller than what you can actually see — the whole page scrolls and the
bottom of it (on the tool flow, the footer with the buttons) is cut off. dvh tracks the
real visible height. vh first as the fallback for anything that lacks dvh. */
.app{ max-width:none; margin:0; min-height:100vh; min-height:100dvh; background:var(--canvas); }
.shell{ display:flex; height:100vh; height:100dvh; overflow:hidden; }
.main{ flex:1; padding:56px 48px 64px; background:var(--canvas); overflow-y:auto; position:relative; }
/* soft accent glow in one corner of the canvas */
.main::before{ content:""; position:fixed; z-index:0; width:640px; height:640px; border-radius:50%;
background:radial-gradient(circle, var(--accent) 0%, transparent 60%); opacity:.09; filter:blur(90px);
top:-220px; right:-180px; pointer-events:none; }
.main > *{ position:relative; z-index:1; }
.main__inner{ max-width:1200px; margin:0 auto; }
.main__inner--narrow{ max-width:680px; }
/* the rail */
.sidebar{ width:260px; flex-shrink:0; background:var(--dark); color:var(--dark-ink);
padding:28px 16px 18px; display:flex; flex-direction:column; }
.brand{ font-family:var(--font-display); font-weight:500; font-size:27px; letter-spacing:-.01em;
color:var(--dark-ink); padding:0 12px 30px; display:flex; align-items:baseline; gap:6px; }
.brand::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
/* The rail's own children on desktop — the drawer wrapper is transparent to layout here,
and the burger + scrim exist only under the mobile breakpoint (see §15). */
.sidebar__drawer{ display:contents; }
.navburger, .sidebar__scrim{ display:none; }
.navburger{ width:40px; height:40px; flex-shrink:0; border:0; background:transparent;
border-radius:12px; cursor:pointer; padding:0; flex-direction:column; align-items:center;
justify-content:center; gap:5px; transition:background .15s ease; }
.navburger span{ display:block; width:20px; height:2px; border-radius:2px;
background:var(--dark-ink); transition:transform .22s ease, opacity .18s ease; }
.navburger:hover{ background:rgba(255,255,255,.08); }
.navburger:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* the three lines fold into an × while the drawer is open */
.sidebar.is-open .navburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.sidebar.is-open .navburger span:nth-child(2){ opacity:0; }
.sidebar.is-open .navburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* wordmark + the avisos bell share one row at the top of the rail */
.brandrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.brandrow .brand{ padding-bottom:0; }
.brandrow{ padding:0 12px 30px; }
.avisos{ position:relative; flex-shrink:0; }
.avisos__btn{ position:relative; display:flex; align-items:center; justify-content:center;
width:36px; height:36px; border:0; border-radius:50%; cursor:pointer;
background:transparent; color:rgba(239,234,227,.62); font-size:19px;
transition:background .15s ease, color .15s ease; }
.avisos__btn:hover{ background:rgba(239,234,227,.10); color:var(--dark-ink); }
.avisos__count{ position:absolute; top:2px; right:1px; min-width:16px; height:16px; padding:0 4px;
border-radius:999px; background:var(--accent); color:#241206;
font-size:10px; font-weight:600; line-height:16px; text-align:center; }
.avisos__menu{ position:absolute; top:calc(100% + 8px); left:-8px; width:290px; z-index:40;
background:var(--surface); border:1px solid var(--line); border-radius:16px;
box-shadow:var(--shadow-2); padding:6px; color:var(--ink);
max-height:60vh; overflow-y:auto; }
.avisos__menu[hidden]{ display:none; }
.avisos__head{ font-size:11px; letter-spacing:.06em; text-transform:uppercase;
color:var(--ink-faint); padding:8px 10px 6px; }
.avisos__item{ display:flex; align-items:flex-start; gap:9px; padding:9px 10px;
border-radius:11px; }
.avisos__item:hover{ background:var(--canvas); }
.avisos__icon{ font-size:16px; margin-top:1px; flex-shrink:0; color:var(--ink-faint); }
.avisos__icon--success{ color:var(--positive); }
.avisos__icon--warning{ color:var(--accent-ink); }
.avisos__text{ flex:1; font-size:13px; line-height:1.45; color:var(--ink-soft);
text-decoration:none; }
a.avisos__text:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.avisos__x{ border:0; background:none; cursor:pointer; color:var(--ink-faint);
font-size:14px; padding:2px; line-height:1; flex-shrink:0; }
.avisos__x:hover{ color:var(--ink); }
.avisos__empty{ font-size:13px; color:var(--ink-faint); padding:6px 10px 12px; }
.nav{ display:flex; flex-direction:column; gap:4px; }
.nav__item{ display:flex; align-items:center; gap:12px; height:44px; padding:0 14px; border-radius:var(--radius-md);
color:rgba(239,234,227,.65); font-size:14.5px; cursor:pointer; transition:color .15s ease, background .15s ease; }
.nav__item i{ font-size:18px; }
.nav__item:hover{ color:var(--dark-ink); background:rgba(255,255,255,.06); }
/* the lit tile: light pill on the dark rail */
.nav__item--active{ background:var(--surface); color:#1C1A17; font-weight:500; }
.nav__item--active:hover{ background:var(--surface); color:#1C1A17; }
.nav__item--active i{ color:#1C1A17; }
.nav__item--inert{ cursor:default; color:rgba(239,234,227,.4); }
.nav__item--inert:hover{ background:transparent; color:rgba(239,234,227,.4); }
/* projects (obras) sliding under Mis documentos */
.nav__sub{ display:flex; flex-direction:column; gap:1px; margin:6px 0 8px 14px; padding-left:12px;
border-left:1px solid rgba(255,255,255,.12); }
.nav__sub-item{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; padding:7px 10px;
border-radius:12px; font-size:13px; color:rgba(239,234,227,.62); }
.nav__sub-item i{ font-size:15px; flex-shrink:0; color:rgba(239,234,227,.45); }
.nav__sub-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav__sub-count{ margin-left:auto; font-size:11px; color:rgba(239,234,227,.5); background:rgba(255,255,255,.08);
border-radius:999px; padding:1px 7px; flex-shrink:0; }
.nav__sub > .nav__sub-item:hover{ color:var(--dark-ink); background:rgba(255,255,255,.06); }
.nav__sub-item--on{ color:var(--dark-ink); font-weight:500; }
.nav__sub-row{ position:relative; display:flex; align-items:center; border-radius:12px; }
.nav__sub-row:hover{ background:rgba(255,255,255,.06); }
.nav__sub-row.is-on{ background:rgba(255,255,255,.1); }
.nav__sub-row.is-on .nav__sub-item{ color:var(--dark-ink); font-weight:500; }
.nav__sub-dots{ flex-shrink:0; width:24px; height:26px; margin-right:3px; display:flex; align-items:center;
justify-content:center; border:none; background:transparent; color:rgba(239,234,227,.55);
border-radius:8px; cursor:pointer; opacity:0; transition:opacity .1s ease; }
.nav__sub-dots i{ font-size:16px; }
.nav__sub-row:hover .nav__sub-dots, .nav__sub-dots[aria-expanded="true"]{ opacity:1; }
.nav__sub-dots:hover{ background:rgba(255,255,255,.12); color:var(--dark-ink); }
.nav__sub-new{ display:flex; align-items:center; gap:8px; width:100%; margin-top:4px; padding:7px 10px;
border:1px dashed rgba(255,255,255,.18); background:transparent; border-radius:12px;
font-size:13px; color:rgba(239,234,227,.6); text-align:left; cursor:pointer; }
.nav__sub-new i{ font-size:15px; }
.nav__sub-new:hover{ color:var(--dark-ink); background:rgba(255,255,255,.06); }
.nav__sub-newform{ padding:4px 4px 4px 0; }
.nav__sub-newform[hidden]{ display:none; }
.nav__sub-newinput{ width:100%; font-size:13px; padding:8px 10px; border-radius:12px;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--dark-ink); }
.nav__sub-newinput::placeholder{ color:rgba(239,234,227,.45); }
.nav__sub-arch{ margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,.1); }
.nav__sub-archlabel{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(239,234,227,.4);
padding:2px 10px 5px; }
.nav__sub-row--arch .nav__sub-item{ color:rgba(239,234,227,.45); }
.obra-rename{ flex:1; min-width:0; padding:3px 4px 3px 0; }
.obra-rename[hidden]{ display:none; }
.nav__sub-row.is-renaming .nav__sub-item, .nav__sub-row.is-renaming .nav__sub-dots{ display:none; }
.obra-rename__input{ width:100%; font-size:13px; padding:7px 9px; border-radius:12px;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:var(--dark-ink); }
/* the floating menu (obras + tool settings) — light card, works from the dark rail too */
.obra-menu{ position:absolute; top:calc(100% + 4px); right:0; z-index:60; min-width:196px; background:var(--surface);
border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-2); padding:6px; }
.obra-menu[hidden]{ display:none; }
.obra-menu form{ margin:0; }
.obra-menu__item{ display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px; border:none;
background:transparent; border-radius:10px; font-size:13px; color:var(--ink); text-align:left; cursor:pointer; }
.obra-menu__item i{ font-size:15px; color:var(--ink-soft); }
.obra-menu__item:hover{ background:var(--canvas-deep); }
.obra-menu__item--danger, .obra-menu__item--danger i{ color:var(--danger-ink); }
.obra-menu__sep{ height:1px; background:var(--line); margin:5px 6px; }
/* account: glass-on-dark card at the rail's foot */
.nav__spacer{ margin-top:auto; }
.account{ position:relative; margin-top:14px; }
.account__trigger{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.06); border-radius:var(--radius-md); cursor:pointer; text-align:left; color:inherit; }
.account__trigger:hover{ background:rgba(255,255,255,.1); }
.account__avatar{ width:32px; height:32px; border-radius:50%; background:var(--accent); color:#241206;
box-shadow:0 0 0 2px var(--accent-soft); display:flex; align-items:center; justify-content:center;
font-size:11.5px; font-weight:600; flex-shrink:0; }
.account__id{ flex:1; min-width:0; }
.account__name{ font-size:13px; color:var(--dark-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account__meta{ font-size:11px; color:rgba(239,234,227,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account__chev{ font-size:15px; color:rgba(239,234,227,.5); flex-shrink:0; transition:transform .15s ease; }
.account__trigger[aria-expanded="true"] .account__chev{ transform:rotate(180deg); }
.account__menu{ position:absolute; left:0; right:0; bottom:calc(100% + 8px); z-index:60; background:var(--surface);
border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-2); padding:6px; }
.account__menu[hidden]{ display:none; }
.account__menu form{ margin:0; }
.account__mi{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:none; background:transparent;
border-radius:10px; font-size:13.5px; color:var(--ink); text-align:left; cursor:pointer; }
.account__mi i{ font-size:16px; color:var(--ink-soft); }
.account__mi:hover{ background:var(--canvas-deep); }
.account__mi--on{ background:var(--accent-bg); }
.account__mi--on, .account__mi--on i{ color:var(--accent-ink); }
.account__sep{ height:1px; background:var(--line); margin:6px 6px; }
/* this month at a glance, at the top of the account menu — a summary that LINKS to the
full meters on /suscripcion rather than repeating them */
.account__use{ display:block; padding:10px 12px 11px; border-radius:10px; color:var(--ink); }
.account__use:hover{ background:var(--canvas-deep); }
.account__use-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.account__use-label{ font-size:11px; letter-spacing:.06em; text-transform:uppercase;
font-weight:500; color:var(--ink-faint); }
.account__use-nums{ font-size:13px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.account__use-nums b{ font-size:14.5px; color:var(--ink); font-weight:600; }
.account__use-bar{ height:4px; border-radius:999px; background:var(--canvas-deep); margin-top:7px; overflow:hidden; }
.account__use-bar span{ display:block; height:100%; border-radius:999px; background:var(--positive); }
.account__use-foot{ font-size:11.5px; color:var(--ink-faint); margin-top:6px; line-height:1.4; }
.account__use--warn .account__use-bar span{ background:var(--st-pending-ink, #C2761B); }
.account__use--warn .account__use-foot{ color:var(--st-pending-ink, #C2761B); }
/* ---------------------------------------------------------------
5 · PRIMITIVES — buttons, chips, badges, notices, tooltip
--------------------------------------------------------------- */
.btn{ font-family:var(--font-ui); font-size:14px; font-weight:500; height:44px; padding:0 22px; border-radius:999px;
cursor:pointer; border:1px solid var(--line-strong); background:transparent; color:var(--ink);
display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.btn:not(.btn--primary):not(.btn--disabled):not([disabled]):hover{ background:var(--canvas-deep); border-color:var(--line-strong); }
.btn--primary{ background:var(--dark); color:var(--dark-ink); border:none; padding:0 26px; }
.btn--primary:hover{ transform:scale(1.02); background:var(--dark-2); }
.btn--ghost{ border-color:transparent; background:transparent; color:var(--ink-soft); }
.btn--ghost:not(.btn--disabled):not([disabled]):hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.btn--sm{ font-size:13px; height:34px; padding:0 15px; }
.btn--lg{ font-size:15px; height:50px; padding:0 28px; }
.btn--block{ width:100%; justify-content:center; }
.btn--disabled, .btn[disabled]{ color:var(--ink-faint); border-color:var(--line); cursor:not-allowed; }
.btn--primary.btn--disabled, .btn--primary[disabled]{ background:var(--dark); color:var(--dark-ink); opacity:.4; transform:none; }
.btn--primary.btn--disabled:hover, .btn--primary[disabled]:hover{ background:var(--dark); transform:none; }
.btn--soft{ background:var(--canvas-deep); color:var(--ink); border-color:transparent; }
.btn--soft:hover{ background:var(--accent-soft); }
/* the pill + arrow-chip motif: give any primary an .btn--chip and the icon becomes the chip */
.btn--chip{ padding-right:8px; }
.btn--chip i{ width:30px; height:30px; border-radius:50%; background:var(--accent); color:#241206;
display:inline-flex; align-items:center; justify-content:center; font-size:15px; margin-left:6px; }
.filter-chip, .signer-opt{ font-family:var(--font-ui); font-size:13px; height:34px; padding:0 16px; border-radius:999px;
border:1px solid var(--line-strong); background:transparent; color:var(--ink-soft); cursor:pointer;
display:inline-flex; align-items:center; gap:6px; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.filter-chip:hover, .signer-opt:hover{ border-color:var(--ink-soft); color:var(--ink); }
.filter-chip--on, .signer-opt--on{ background:var(--dark); color:var(--dark-ink); border-color:var(--dark); }
.filter-chip--on:hover, .signer-opt--on:hover{ color:var(--dark-ink); }
/* status = 6px dot + text label. Never an icon. */
.badge{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--ink-soft); padding:0; border-radius:0; background:none; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ink-faint); flex-shrink:0; }
.badge i{ display:none; }
.badge--certified{ color:var(--st-ready-ink); } .badge--certified::before{ background:var(--positive); }
.badge--owned{ color:var(--st-ready-ink); } .badge--owned::before{ background:var(--positive); }
.badge--preview{ color:var(--st-review-ink); } .badge--preview::before{ background:var(--st-review); }
.badge--instant{ color:var(--ink-soft); } .badge--instant::before{ background:var(--accent); }
.badge--setup{ color:var(--st-pending-ink); } .badge--setup::before{ background:var(--st-pending); }
.badge--resume{ color:var(--accent-ink); } .badge--resume::before{ background:var(--accent); }
.plan-tag{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:500; letter-spacing:.05em;
text-transform:uppercase; color:var(--accent-ink); }
.plan-tag i{ font-size:12px; }
.statuspill{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; color:var(--ink-soft); padding:0; }
.statuspill__dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.statuspill--pending{ color:var(--st-pending-ink); } .statuspill--pending .statuspill__dot{ background:var(--st-pending); }
.statuspill--review{ color:var(--st-review-ink); } .statuspill--review .statuspill__dot{ background:var(--st-review); }
.statuspill--ready{ color:var(--st-ready-ink); } .statuspill--ready .statuspill__dot{ background:var(--positive); }
.pill--done{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; padding:5px 13px; border-radius:999px; background:var(--positive-bg); color:var(--st-ready-ink); }
.pill--attention{ font-size:12.5px; padding:5px 13px; border-radius:999px; background:var(--st-pending-bg); color:var(--st-pending-ink); }
.pill--review{ font-size:12.5px; padding:5px 13px; border-radius:999px; background:var(--canvas-deep); color:var(--ink-soft); display:inline-flex; align-items:center; gap:5px; }
.pill--review i{ font-size:11px; }
.pill--reviewed{ background:var(--positive-bg)!important; color:var(--st-ready-ink)!important; }
/* notifications: quiet glass slivers */
.notif{ display:flex; align-items:center; gap:11px; background:var(--surface-glass);
-webkit-backdrop-filter:var(--blur-glass); backdrop-filter:var(--blur-glass);
border:1px solid var(--glass-edge); border-radius:999px; padding:10px 18px; margin-bottom:14px;
font-size:13.5px; color:var(--ink); box-shadow:var(--shadow-1); }
.notif > i{ font-size:17px; color:var(--accent); flex-shrink:0; }
.notif__text{ flex:1; }
.notif__x{ background:none; border:0; color:var(--ink-faint); cursor:pointer; font-size:16px; padding:4px; border-radius:50%; display:inline-flex; }
.notif__x:hover{ background:var(--canvas-deep); color:var(--ink); }
.banner{ display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line);
border-radius:var(--radius-md); padding:14px 18px; margin-bottom:26px; font-size:14px; color:var(--ink-soft); }
.banner i{ color:var(--accent); font-size:18px; }
[data-tip]{ position:relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after{ content:attr(data-tip); position:absolute; left:0; top:calc(100% + 8px);
z-index:20; width:max-content; max-width:min(260px, calc(100vw - 32px)); background:var(--dark); color:var(--dark-ink);
font-size:12.5px; line-height:1.45; font-weight:400; padding:10px 13px; border-radius:12px; box-shadow:var(--shadow-2);
white-space:normal; pointer-events:none; }
[data-tip]:hover::before, [data-tip]:focus-visible::before{ content:""; position:absolute; left:14px; top:calc(100% + 2px);
z-index:21; border:6px solid transparent; border-bottom-color:var(--dark); pointer-events:none; }
/* imagery: every photo sits in a rounded container, warm-graded via overlay */
.ph{ position:relative; overflow:hidden; background-color:var(--canvas-deep); background-size:cover; background-position:center; }
.ph::after{ content:""; position:absolute; inset:0; background:var(--canvas); opacity:.12; mix-blend-mode:multiply; pointer-events:none; }
:root[data-theme="dark"] .ph::after{ background:#000; opacity:.28; mix-blend-mode:normal; }
.ph--hero{ background-image:url('/static/img/hero.webp'); }
.ph--tools{ background-image:url('/static/img/tools.webp'); }
.ph--empty{ background-image:url('/static/img/empty.webp'); }
.ph--detail{ background-image:url('/static/img/detail.webp'); }
.ph--wizard{ background-image:url('/static/img/wizard.webp'); }
.ph--actas{ background-image:url('/static/img/actas.webp'); }
.ph--comunicaciones{ background-image:url('/static/img/comunicaciones.webp'); }
.ph--certificados{ background-image:url('/static/img/certificados.webp'); }
.ph--informes{ background-image:url('/static/img/informes.webp'); }
.ph--encargos{ background-image:url('/static/img/encargos.webp'); }
/* fam-* now selects the tool's PHOTO identity (pastel tiles are gone) + a muted stroke for glyphs */
.fam-actas{ --fam-photo:url('/static/img/actas.webp'); --fam-stroke:var(--family-actas-stroke); --fam-tint:var(--canvas-deep); }
.fam-comunicaciones{ --fam-photo:url('/static/img/comunicaciones.webp'); --fam-stroke:var(--family-comunicaciones-stroke); --fam-tint:var(--canvas-deep); }
.fam-certificados{ --fam-photo:url('/static/img/certificados.webp'); --fam-stroke:var(--family-certificados-stroke); --fam-tint:var(--canvas-deep); }
.fam-informes{ --fam-photo:url('/static/img/informes.webp'); --fam-stroke:var(--family-informes-stroke); --fam-tint:var(--canvas-deep); }
.fam-encargos{ --fam-photo:url('/static/img/encargos.webp'); --fam-stroke:var(--family-encargos-stroke); --fam-tint:var(--canvas-deep); }
/* per-tool photo identity (wins over the family fallback above): each catalog tool's
image depicts what the tool documents — site visit, setting-out, handover… */
.ph-acta_regulada_test{ --fam-photo:url('/static/img/tools/acta_regulada_test.webp'); }
.ph-acta_replanteo{ --fam-photo:url('/static/img/tools/acta_replanteo.webp'); }
.ph-acta_recepcion{ --fam-photo:url('/static/img/tools/acta_recepcion.webp'); }
.ph-cfo_generator{ --fam-photo:url('/static/img/tools/cfo_generator.webp'); }
.ph-comunicacion_previa{ --fam-photo:url('/static/img/tools/comunicacion_previa.webp'); }
.ph-informe_vv{ --fam-photo:url('/static/img/tools/informe_vv.webp'); }
.ph-cee_demo{ --fam-photo:url('/static/img/tools/cee_demo.webp'); }
.ph-ite_demo{ --fam-photo:url('/static/img/tools/ite_demo.webp'); }
.ph-certificado_antiguedad{ --fam-photo:url('/static/img/tools/certificado_antiguedad.webp'); }
.ph-certificado_habitabilidad{ --fam-photo:url('/static/img/tools/certificado_habitabilidad.webp'); }
.ph-certificado_generico{ --fam-photo:url('/static/img/tools/certificado_generico.webp'); }
.ph-ebss{ --fam-photo:url('/static/img/tools/ebss.webp'); }
.ph-hoja_encargo{ --fam-photo:url('/static/img/tools/hoja_encargo.webp'); }
/* ---------------------------------------------------------------
6 · CATÁLOGO — editorial header, photo cards, bento grid
--------------------------------------------------------------- */
.cat-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:20px; flex-wrap:wrap; }
.cat-head__main{ max-width:640px; }
.cat-head__main .page-sub{ margin-bottom:0; }
/* above the card grid, so the search's type-ahead dropdown is never painted over */
.cat-head__aside{ display:flex; flex-direction:column; gap:10px; align-items:flex-end;
position:relative; z-index:50; }
/* trial: a slim glass pill with the number in display type */
.trial-note{ display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft);
background:var(--surface-glass); -webkit-backdrop-filter:var(--blur-glass); backdrop-filter:var(--blur-glass);
border:1px solid var(--glass-edge); box-shadow:var(--shadow-1); border-radius:999px; padding:8px 18px; margin:0; }
.trial-note i{ display:none; }
.trial-note b{ font-family:var(--font-display); font-size:22px; font-weight:500; color:var(--accent-ink); line-height:1; }
.slots-meter{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft);
border:1px solid var(--line-strong); border-radius:999px; padding:7px 16px; margin:0; }
.slots-meter i{ display:none; }
.slots-meter b{ color:var(--ink); font-weight:600; }
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; margin-top:36px; }
/* staggered bento rhythm across the whole grid: on a 3-column canvas the wide card
alternates sides — [big·small] then [small·big] — so no two rows read the same */
.cat-grid--bento > .cat-tile:nth-child(4n+1),
.cat-grid--bento > .cat-tile:nth-child(4n){ grid-column:span 2; }
.cat-grid--bento:not(.cat-grid--v3) > .cat-tile:nth-child(4n+1):not(.cat-tile--soon) .cat-tile__art,
.cat-grid--bento:not(.cat-grid--v3) > .cat-tile:nth-child(4n):not(.cat-tile--soon) .cat-tile__art{ height:210px; }
@media (max-width:760px){
.cat-grid--bento > .cat-tile:nth-child(4n+1),
.cat-grid--bento > .cat-tile:nth-child(4n){ grid-column:span 1; }
.cat-grid--bento:not(.cat-grid--v3) > .cat-tile:nth-child(4n+1):not(.cat-tile--soon) .cat-tile__art,
.cat-grid--bento:not(.cat-grid--v3) > .cat-tile:nth-child(4n):not(.cat-tile--soon) .cat-tile__art{ height:170px; }
}
.cat-tile{ display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden;
background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-xl);
box-shadow:var(--shadow-1); transition:transform .2s ease, box-shadow .2s ease; }
.cat-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
/* photo header — the tool's identity. The image lives on ::before so it can be
desaturated toward the app palette without touching the glass chip above it. */
.cat-tile__art{ position:relative; height:170px; display:block; background-color:var(--canvas-deep); overflow:hidden; }
.cat-tile__art::before{ content:""; position:absolute; inset:0; background-image:var(--fam-photo);
background-size:cover; background-position:center; filter:saturate(.78); }
.cat-tile__art::after{ content:""; position:absolute; inset:0; background:var(--canvas); opacity:.12; mix-blend-mode:multiply; }
:root[data-theme="dark"] .cat-tile__art::after{ background:#000; opacity:.25; mix-blend-mode:normal; }
/* small glass chip over the photo, bottom-left, carrying the tool's minimal glyph */
.cat-tile__art .logo-mark{ position:absolute; left:14px; bottom:14px; z-index:2; width:44px; height:44px; border-radius:16px;
background:var(--surface-glass); -webkit-backdrop-filter:var(--blur-glass); backdrop-filter:var(--blur-glass);
border:1px solid var(--glass-edge); display:flex; align-items:center; justify-content:center; color:var(--ink); }
.cat-tile__art svg.logo-glyph{ width:22px; height:22px; transition:none; }
.cat-tile:hover .cat-tile__art svg{ transform:none; }
.logo-badge{ display:none; } /* corner badges on icons: banned */
.cat-tile__name{ padding:18px 22px 0; font-size:20px; font-weight:600; color:var(--ink); line-height:1.25; }
a.cat-tile__name:hover{ color:var(--accent-ink); }
.cat-tile__desc{ padding:0 22px; margin-top:6px; font-size:14px; color:var(--ink-soft); line-height:1.5; flex:1; }
.cat-tile__meta{ display:flex; flex-direction:column; gap:5px; padding:12px 22px 0; }
.cat-tile__fact{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); }
.cat-tile__fact i{ display:none; }
.cat-tile__fact::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--positive); flex-shrink:0; }
.cat-tile__fact--up{ color:var(--ink-faint); }
.cat-tile__fact--up::before{ background:var(--accent); }
.cat-tile__actions{ display:flex; flex-direction:column; gap:6px; padding:16px 22px 20px; margin-top:auto; }
.cat-tile__actions form{ display:contents; }
.cat-tile__btn{ width:100%; justify-content:center; }
.cat-tile__btn.btn--ghost{ border:none; height:36px; }
/* locked (Pro): frosted photo + quiet glass lock chip */
.cat-tile--locked .cat-tile__art::after{ opacity:.45; -webkit-backdrop-filter:blur(3px) saturate(.7); backdrop-filter:blur(3px) saturate(.7); }
.cat-tile__lock{ position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; border-radius:50%; font-size:14px;
background:var(--surface-glass); -webkit-backdrop-filter:var(--blur-glass); backdrop-filter:var(--blur-glass);
border:1px solid var(--glass-edge); color:var(--ink); display:flex; align-items:center; justify-content:center; padding:0; }
.cat-tile--locked .cat-tile__art .logo-mark{ opacity:.85; filter:none; }
/* coming soon: flat, no photo, quiet */
.cat-tile--soon{ background:var(--canvas-deep); border-color:transparent; box-shadow:none; }
.cat-tile--soon:hover{ transform:none; box-shadow:none; }
.cat-tile--soon .cat-tile__art{ background-image:var(--fam-photo); filter:blur(14px) saturate(.5); opacity:.35; height:86px; }
.cat-tile--soon .cat-tile__art .logo-mark{ display:none; }
.cat-tile--soon .cat-tile__name, .cat-tile--soon .cat-tile__desc{ opacity:.7; }
.cat-tile__soon{ position:absolute; top:12px; right:12px; font-size:10px; text-transform:uppercase; letter-spacing:.08em;
color:var(--ink-soft); background:var(--surface); border-radius:999px; padding:4px 10px; }
/* section labels: eyebrow + hairline running right */
.cat-divider{ border:0; margin:56px 0 0; }
.cat-section-label{ display:flex; align-items:center; gap:12px; font-size:11.5px; letter-spacing:.08em; font-weight:500;
text-transform:uppercase; color:var(--ink-faint); margin:26px 0 0; }
.cat-section-label i{ font-size:13px; }
.cat-section-label::after{ content:""; flex:1; height:1px; background:var(--line-strong); }
/* ---------------------------------------------------------------
7 · TOOL DETAIL (catalog)
--------------------------------------------------------------- */
.detail-head{ position:relative; display:flex; flex-direction:column; gap:0; margin-bottom:8px; }
.detail-head__art{ width:100%; height:190px; border-radius:var(--radius-xl); background-color:var(--canvas-deep);
border:1px solid var(--line); position:relative; overflow:hidden; }
.detail-head__art::before{ content:""; position:absolute; inset:0; background-image:var(--fam-photo);
background-size:cover; background-position:center; filter:saturate(.78); }
.detail-head__art::after{ content:""; position:absolute; inset:0; background:var(--canvas); opacity:.1; mix-blend-mode:multiply; }
:root[data-theme="dark"] .detail-head__art::after{ background:#000; opacity:.25; mix-blend-mode:normal; }
.detail-head__art .logo-mark{ position:absolute; left:16px; bottom:16px; width:48px; height:48px; border-radius:16px;
background:var(--surface-glass); -webkit-backdrop-filter:var(--blur-glass); backdrop-filter:var(--blur-glass);
border:1px solid var(--glass-edge); display:flex; align-items:center; justify-content:center; color:var(--ink); z-index:2; }
.detail-head__art svg.logo-glyph{ width:24px; height:24px; }
.detail-head > div:last-child{ margin-top:-34px; z-index:2; background:var(--surface-glass);
-webkit-backdrop-filter:var(--blur-glass); backdrop-filter:var(--blur-glass); border:1px solid var(--glass-edge);
border-radius:var(--radius-lg); box-shadow:var(--shadow-1); padding:24px 28px 20px; margin-left:20px; margin-right:20px; }
.detail-head .eyebrow{ margin-bottom:6px; }
.detail-head .page-title{ font-size:clamp(28px, 3vw, 40px); }
.detail-head__badges{ margin-top:12px; display:flex; gap:16px; flex-wrap:wrap; }
.detail__h{ font-family:var(--font-display); font-size:19px; font-weight:500; color:var(--ink); margin:36px 0 8px; }
.detail__text{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin:0; }
.detail__promises{ margin:20px 0; display:flex; flex-direction:column; gap:10px; }
.detail__promise{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.detail__promise i{ font-size:16px; color:var(--positive); flex-shrink:0; margin-top:1px; }
.detail__action{ margin-top:30px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.detail__note{ font-size:12.5px; color:var(--ink-faint); margin:10px 0 0; }
.detail__owned{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--st-ready-ink); }
.detail__owned i{ color:var(--positive); }
.detail__quitar{ margin-top:10px; }
.detail__quitar-btn{ background:none; border:0; font:inherit; font-size:12.5px; color:var(--ink-faint); cursor:pointer;
display:inline-flex; align-items:center; gap:6px; padding:4px 2px; }
.detail__quitar-btn:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.legal__back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft); margin-bottom:20px; }
.legal__back:hover{ color:var(--ink); }
.video-slot{ margin:14px 0 6px; }
.video-slot__frame{ display:block; width:100%; aspect-ratio:16/9; border:1px solid var(--line); border-radius:var(--radius-lg); background:#141210; }
.video-slot__poster{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; aspect-ratio:16/9;
border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--canvas-deep); }
.video-slot__play{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:var(--surface); color:var(--ink); font-size:20px; box-shadow:var(--shadow-1); }
.video-slot__label{ font-size:13.5px; color:var(--ink-soft); }
.video-slot__soon{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.steps-visual{ display:flex; align-items:center; gap:10px; margin:14px 0 6px; flex-wrap:wrap; }
.step-v{ position:relative; width:92px; height:92px; border-radius:var(--radius-md); background:var(--surface);
border:1px solid var(--line); padding:16px; transition:transform .15s ease; }
.step-v:hover{ transform:translateY(-3px); }
.step-v__num{ position:absolute; top:-9px; left:-6px; font-family:var(--font-display); font-size:22px; font-weight:500;
color:var(--accent); background:none; width:auto; height:auto; }
.step-v__arrow{ color:var(--ink-faint); font-size:16px; flex-shrink:0; }
@media (max-width:640px){ .steps-visual{ gap:8px; } .step-v{ width:76px; height:76px; padding:12px; } .step-v__arrow{ display:none; } }
/* ---------------------------------------------------------------
8 · MIS HERRAMIENTAS — master-detail workspace
--------------------------------------------------------------- */
.main--md{ padding:0; overflow:hidden; }
.main--md::before{ display:none; }
.md{ display:flex; height:100%; }
.md-list{ width:280px; flex-shrink:0; display:flex; flex-direction:column; background:var(--canvas-deep);
border-right:1px solid var(--line); }
.md-list__label{ font-size:11.5px; letter-spacing:.08em; font-weight:500; text-transform:uppercase; color:var(--ink-faint);
padding:30px 18px 22px; display:flex; align-items:center; gap:10px; }
.md-list__label::after{ content:""; flex:1; height:1px; background:var(--line-strong); }
.md-list__items{ flex:0 1 auto; min-height:0; overflow-y:auto; padding:4px 10px; display:flex; flex-direction:column; gap:2px; }
.md-item{ position:relative; display:flex; align-items:center; border-radius:var(--radius-sm); color:var(--ink); cursor:grab;
transition:background .15s ease; }
.md-item--drag{ opacity:.45; cursor:grabbing; }
.md-item:hover{ background:var(--surface); }
.md-item__link{ flex:1; min-width:0; display:flex; align-items:center; gap:11px; padding:9px 11px; color:inherit; }
/* the rail tile carries the tool's family colour, exactly like the catalog badge */
.md-item__tile{ width:30px; height:30px; flex-shrink:0; border-radius:10px;
background:var(--fam-ink, var(--dark)); border:none; color:#FFF9F2;
display:flex; align-items:center; justify-content:center; }
.md-item__tile svg{ width:17px; height:17px; }
/* flex:1 + min-width:0 is what makes the clamp actually clamp: without them the name's
intrinsic width is a floor, so a long tool name pushed the status dot out of the row
and on top of the pin button */
.md-item__name{ flex:1; min-width:0; font-size:13.5px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* selected: the lit dark tile (echoes the rail's inverted logic) */
.md-item--on{ background:var(--dark); color:var(--dark-ink); box-shadow:var(--shadow-1); }
/* the tile keeps its family colour when the row is selected — identity shouldn't change */
.md-item__pinform{ display:flex; flex-shrink:0; }
.md-item__pin{ display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer;
padding:6px; margin-right:4px; border-radius:8px; color:var(--ink-faint); font-size:15px; opacity:0;
pointer-events:none; transition:opacity .12s ease, background .12s ease, color .12s ease; }
.md-item:hover .md-item__pin, .md-item--pinned .md-item__pin, .md-item__pin:focus-visible{ opacity:1; pointer-events:auto; }
.md-item__pin:hover{ color:var(--ink); background:rgba(28,26,23,.05); }
.md-item--pinned .md-item__pin{ color:var(--accent); }
.md-item--on .md-item__pin{ color:var(--dark-ink); }
.md-item--on .md-item__pin:hover{ background:rgba(255,255,255,.15); }
.md-list__sep{ height:1px; background:var(--line-strong); margin:6px 12px; flex-shrink:0; }
.md-list__add{ margin:8px 10px; padding:10px; border:1px dashed var(--line-3); border-radius:var(--radius-sm);
color:var(--ink-soft); font-size:13px; display:flex; align-items:center; gap:7px; justify-content:center;
transition:color .15s ease, border-color .15s ease, background .15s ease; }
.md-list__add:hover{ color:var(--ink); background:var(--surface); }
.md-dot{ width:7px; height:7px; border-radius:50%; flex:none; margin-left:auto; margin-right:-31px; transition:margin-right .12s ease; }
.md-item:hover .md-dot, .md-item:focus-within .md-dot, .md-item--pinned .md-dot{ margin-right:5px; }
.md-dot--pending{ background:var(--st-pending); }
.md-dot--review{ background:var(--st-review); }
.md-dot--ready{ background:var(--positive); }
.md-pane{ flex:1; min-width:0; overflow-y:auto; background:var(--canvas); padding:34px 40px; display:flex; flex-direction:column; position:relative; }
.md-pane::before{ content:""; position:fixed; z-index:0; width:560px; height:560px; border-radius:50%;
background:radial-gradient(circle, var(--accent) 0%, transparent 60%); opacity:.09; filter:blur(90px);
top:-200px; right:-160px; pointer-events:none; }
.md-pane > *{ position:relative; z-index:1; }
.md-detail{ display:flex; flex-direction:column; flex:1; width:100%; max-width:880px; margin-inline:auto; }
.md-detail[hidden]{ display:none; }
/* HEAD: the tool's LOGO is its identity on this page — one big floating squircle,
glossy status pill beneath, everything else unchanged below it. */
.md-tool-head{ position:relative; margin-top:28px; }
.md-tool-head__logo{ width:132px; height:132px; border-radius:36px; background:var(--fam-ink, var(--dark));
box-shadow:0 1px 2px rgba(15,26,42,.08), 0 12px 28px rgba(15,26,42,.16), 0 30px 60px rgba(15,26,42,.12);
display:flex; align-items:center; justify-content:center; color:#FFF9F2; margin-bottom:26px; }
/* dark theme flips --fam-ink to a light pastel, so the glyph on it must go DARK or it
disappears — the same reason .md-item__tile needs this */
:root[data-theme="dark"] .md-tool-head__logo, :root[data-theme="dark"] .md-item__tile,
:root[data-theme="dark"] .cal-head__chip{ color:#16283E; }
.md-tool-head__logo svg.logo-glyph{ width:64px; height:64px; }
.md-tool-head .md-detail__status{ margin-top:10px; }
.md-tool-head .statuspill{ background:var(--surface-glass); -webkit-backdrop-filter:var(--blur-glass);
backdrop-filter:var(--blur-glass); border:1px solid var(--glass-edge); box-shadow:var(--shadow-1);
padding:8px 18px; border-radius:999px; }
:root[data-theme="dark"] .md-tool-head__logo{ box-shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: no-preference){
.md-tool-head__logo{ animation:card-pop .45s var(--spring); }
}
/* legacy hero head fallback (kept for templates not yet recomposed) */
.md-detail__head{ position:relative; display:flex; align-items:flex-start; gap:24px; margin-top:24px; }
.md-detail__headmain{ flex:1; min-width:0; }
.md-detail__art{ display:none; }
.md-detail__name{ font-family:var(--font-display); font-size:clamp(30px, 3.4vw, 46px); font-weight:500;
letter-spacing:-.015em; line-height:1.05; color:var(--ink); margin:0 0 10px; }
.md-detail__status{ margin-top:2px; position:relative; z-index:2; }
.md-detail__status:hover, .md-detail__status:focus-within{ z-index:30; }
.md-detail__note{ font-size:13px; color:var(--ink-soft); margin:10px 0 0; line-height:1.5; max-width:52ch; text-wrap:pretty; }
.md-detail__desc{ font-size:16.5px; color:var(--ink-soft); line-height:1.6; margin:12px 0 0; max-width:56ch; }
.md-detail__hint{ margin-top:18px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
background:var(--surface); font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.md-detail__actions{ margin-top:24px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.md-detail__actions .btn--primary{ height:48px; font-size:15px; padding:0 30px; }
/* the alternative action stands beside the primary as a real outlined pill, not faint text */
.md-detail__actions .btn:not(.btn--primary){ height:48px; font-size:14.5px; padding:0 24px;
border-color:var(--line-strong); color:var(--ink); }
.tool-set{ position:absolute; top:16px; right:16px; z-index:5; }
/* secondary, but it has to be findable: a real floating chip rather than a faint glyph */
.tool-set__dots{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:none;
background:var(--surface); border-radius:13px; cursor:pointer; color:var(--ink-soft); font-size:21px;
box-shadow:0 1px 2px rgba(15,26,42,.06), 0 5px 14px rgba(15,26,42,.10);
transition:background .15s ease, color .15s ease, transform .3s var(--spring, ease); }
.tool-set__dots:hover, .tool-set__dots[aria-expanded="true"]{ background:var(--canvas-deep); color:var(--ink); }
.tool-set__dots:active{ transform:scale(.94); }
:root[data-theme="dark"] .tool-set__dots{ background:var(--canvas-deep); color:var(--ink); }
.tool-set__menu{ min-width:218px; }
.upd-body{ font-size:16px; color:var(--ink-soft); line-height:1.65; margin:20px 0 0; max-width:56ch; text-wrap:pretty; }
.upd-actions{ display:flex; gap:10px; align-items:center; margin-top:28px; flex-wrap:wrap; }
.cal-actions__row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.fam-stop{ background:var(--amber-bg-soft); border:1px solid var(--amber-line); border-radius:var(--radius-md); padding:20px 22px; margin:18px 0; }
.fam-stop__head{ display:flex; align-items:flex-start; gap:10px; }
.fam-stop__head i{ color:var(--st-pending); font-size:21px; flex-shrink:0; margin-top:2px; }
.fam-stop__title{ font-family:var(--font-display); font-size:19px; font-weight:500; color:var(--st-pending-ink); margin:0; line-height:1.3; text-wrap:balance; }
.fam-stop__body{ font-size:14.5px; color:var(--st-pending-ink); line-height:1.6; margin:10px 0 0; max-width:56ch; text-wrap:pretty; }
.fam-stop__actions{ display:flex; align-items:center; gap:16px; margin-top:18px; flex-wrap:wrap; }
.fam-stop__actions form, .fam-cont form{ margin:0; }
.fam-stop__go{ border:none; background:transparent; font:inherit; font-size:13px; color:var(--ink-soft);
text-decoration:underline; text-underline-offset:2px; cursor:pointer; padding:6px 2px; }
.fam-stop__go:hover{ color:var(--ink); }
.fam-cont{ display:flex; align-items:center; gap:16px; margin:14px 0 4px; flex-wrap:wrap; }
/* walkthrough disclosure */
.md-how{ margin-top:18px; }
.md-how__q{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-soft); cursor:pointer;
list-style:none; padding:4px 0; transition:color .15s ease; }
.md-how__q::-webkit-details-marker{ display:none; }
.md-how__q:hover{ color:var(--ink); }
.md-how__q .ti-help-circle{ font-size:16px; color:var(--accent); }
.md-how__chev{ font-size:14px; transition:transform .15s ease; }
.md-how[open] .md-how__chev{ transform:rotate(180deg); }
.md-how__body{ margin-top:12px; padding:20px 22px; background:var(--surface); border:1px solid var(--line);
border-radius:var(--radius-md); display:flex; flex-direction:column; gap:18px; box-shadow:var(--shadow-1); }
.md-how__step{ display:flex; align-items:flex-start; gap:16px; }
/* step marker: typographic number, not an icon tile */
.md-how__art{ width:44px; height:44px; flex-shrink:0; border-radius:12px; background:var(--canvas-deep);
display:flex; align-items:center; justify-content:center; padding:8px; }
.md-how__art svg{ opacity:.75; }
.md-how__art .a{ stroke:var(--ink-soft); } .md-how__art .b{ stroke:var(--ink-faint); }
.md-how__art .acc{ stroke:var(--accent); } .md-how__art .f{ fill:var(--surface); } .md-how__art .p{ fill:var(--surface); }
.md-how__t{ font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.md-how__t::first-letter{ color:var(--accent-ink); }
.md-how__p{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0; }
/* recientes: one surface card, hairline dividers, 60px rows */
.md-recent{ margin-top:44px; }
.md-recent__label{ font-size:11.5px; letter-spacing:.08em; font-weight:500; text-transform:uppercase; color:var(--ink-faint);
margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.md-recent__label::after{ content:""; flex:1; height:1px; background:var(--line-strong); }
.md-recent__list{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-1); overflow:hidden; }
.md-recent__item{ display:flex; align-items:center; gap:12px; padding:0 18px; min-height:60px; color:var(--ink); font-size:14px;
border-top:1px solid var(--line); transition:background .15s ease; }
.md-recent__list .md-recent__item:first-child, .md-recent > .md-recent__item:first-of-type{ border-top:0; }
.md-recent > .md-recent__item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:6px; }
.md-recent__item:hover{ background:var(--canvas-deep); }
.md-recent__item i{ font-size:16px; color:var(--ink-faint); flex-shrink:0; }
.md-recent__text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; padding:10px 0; }
.md-recent__name{ font-weight:500; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.md-recent__file{ font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.md-recent__date{ flex-shrink:0; font-size:13px; color:var(--ink-faint); }
.md-recent__hint{ display:none; flex-shrink:0; align-items:center; gap:5px; font-size:12.5px; color:var(--accent-ink); }
.md-recent__hint i{ font-size:13px; color:var(--accent-ink); }
.md-recent__item:hover .md-recent__date, .md-recent__item:focus-visible .md-recent__date{ display:none; }
.md-recent__item:hover .md-recent__hint, .md-recent__item:focus-visible .md-recent__hint{ display:inline-flex; }
.md-recent__none{ font-size:13.5px; color:var(--ink-soft); margin:0; }
.md-welcome{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; }
.md-welcome__title{ font-family:var(--font-display); font-size:clamp(26px, 3vw, 38px); font-weight:500; margin:0; letter-spacing:-.01em; }
.md-welcome__text{ font-size:14.5px; color:var(--ink-soft); margin:0 0 16px; }
.md-back{ display:none; align-items:center; gap:6px; font-size:13.5px; color:var(--ink-soft); margin-bottom:14px; }
@media (max-width:900px){
.md-list{ width:100%; border-right:0; }
.md-pane{ display:none; }
.md--focus .md-list{ display:none; }
.md--focus .md-pane{ display:flex; }
.md--focus .md-back{ display:inline-flex; }
/* the row opens the tool's page, same as on a desktop; the pane takes over the screen */
.md-item__link{ padding:12px 11px; }
.md-item__pin{ width:44px; height:44px; opacity:1; pointer-events:auto; }
/* the dot's negative margin tucks it under the pin, which is hidden until hover on a
desktop. Here the pin is always shown, so the dot needs its own space. */
.md-dot{ margin-right:0; }
}
@media (max-width:640px){
.md-tool-head__logo{ width:96px; height:96px; border-radius:28px; margin-bottom:18px; }
.md-tool-head__logo svg.logo-glyph{ width:48px; height:48px; }
}
@media (prefers-reduced-motion: no-preference){
.md-item{ opacity:0; transform:translateX(-6px); animation:md-in .3s ease forwards; animation-delay:calc(var(--i, 0) * 35ms); }
.md-list__add{ opacity:0; animation:md-in .3s ease forwards; animation-delay:.28s; }
.md-detail{ animation:md-rise .28s ease; }
.md-detail .md-recent__item{ opacity:0; animation:md-in .28s ease forwards; animation-delay:calc(.08s + var(--i, 0) * 40ms); }
.md-welcome{ animation:md-rise .35s ease; }
.md-how[open] .md-how__body{ animation:md-rise .25s ease; }
@keyframes md-in{ to{ opacity:1; transform:none; } }
@keyframes md-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
}
/* ---------------------------------------------------------------
9 · MIS DOCUMENTOS
--------------------------------------------------------------- */
.doc-controls{ display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.doc-search{ flex:1; min-width:220px; display:flex; align-items:center; gap:10px; height:46px;
background:var(--surface-glass); -webkit-backdrop-filter:var(--blur-glass); backdrop-filter:var(--blur-glass);
border:1px solid var(--glass-edge); box-shadow:var(--shadow-1); border-radius:999px; padding:0 20px; }
.doc-search i{ color:var(--ink-faint); font-size:17px; }
.doc-search input{ flex:1; min-width:0; border:0; background:transparent; font-size:14px; color:var(--ink); padding:10px 0; outline:none; }
.doc-sort{ appearance:none; -webkit-appearance:none; font-family:var(--font-ui); font-size:13.5px; color:var(--ink);
background-color:transparent; border:1px solid var(--line-strong); border-radius:999px; height:46px;
padding:0 40px 0 20px; cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2357534B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 16px center; background-size:12px; }
.doc-sort:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.doc-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.doc-empty-filter{ font-size:14px; color:var(--ink-soft); padding:24px; text-align:center; }
/* one continuous card; rows divided by hairlines */
.doc-list{ display:flex; flex-direction:column; gap:0; background:var(--surface); border:1px solid var(--line);
border-radius:var(--radius-lg); box-shadow:var(--shadow-1); overflow:hidden; }
.doc-item{ background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; padding:14px 20px; transition:background .15s ease; }
.doc-item:first-child{ border-top:0; }
.doc-item:hover{ background:var(--canvas-deep); box-shadow:none; }
.doc-item--hl{ background:var(--accent-bg); }
@media (prefers-reduced-motion: no-preference){
.doc-item--hl{ animation:doc-hl 2.4s ease 1.2s forwards; }
@keyframes doc-hl{ to{ background:transparent; } }
}
.doc-item__main{ display:flex; align-items:center; gap:14px; }
.doc-item__icon{ width:40px; height:40px; border-radius:12px; background:var(--canvas-deep); color:var(--ink-soft);
display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.doc-item__body{ flex:1; min-width:0; }
.doc-item__name{ font-size:15px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-item__meta{ font-size:13px; color:var(--ink-faint); margin-top:2px; font-variant-numeric:tabular-nums; }
.doc-item__obra{ color:var(--ink-soft); font-weight:500; }
.doc-item__obra i{ font-size:13px; }
.doc-item__gone{ font-size:12.5px; color:var(--ink-faint); }
/* actions stay quiet until the row is hovered (always visible on touch) */
@media (hover:hover) and (pointer:fine) and (min-width:641px){
.doc-item__main > .btn, .doc-item__main > .icon-btn, .doc-item__main > .icon-form{ opacity:0; transition:opacity .15s ease; }
.doc-item:hover .doc-item__main > .btn, .doc-item:hover .doc-item__main > .icon-btn,
.doc-item:hover .doc-item__main > .icon-form,
.doc-item:focus-within .doc-item__main > .btn, .doc-item:focus-within .doc-item__main > .icon-btn,
.doc-item:focus-within .doc-item__main > .icon-form{ opacity:1; }
}
.doc-pick{ width:16px; height:16px; accent-color:var(--accent); flex-shrink:0; cursor:pointer; }
/* bulk bar: floating glass, bottom-centre, slides up when a doc is ticked */
#zip-selected{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:90;
background:var(--surface-glass); -webkit-backdrop-filter:var(--blur-glass); backdrop-filter:var(--blur-glass);
border:1px solid var(--glass-edge); box-shadow:var(--shadow-2); color:var(--ink); height:48px; padding:0 26px; }
#zip-selected:hover{ background:var(--surface); }
#zip-selected[hidden]{ display:none; }
@media (prefers-reduced-motion: no-preference){
#zip-selected:not([hidden]){ animation:bulk-up .25s ease; }
@keyframes bulk-up{ from{ opacity:0; transform:translateX(-50%) translateY(14px); } to{ opacity:1; transform:translateX(-50%); } }
}
.icon-form{ display:inline-flex; }
.icon-btn{ width:34px; height:34px; border-radius:50%; border:none; background:transparent; color:var(--ink-soft);
cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:17px;
transition:background .12s ease, color .12s ease; }
.icon-btn:hover{ background:var(--canvas-deep); color:var(--ink); }
.icon-btn--danger:hover{ background:var(--accent-bg); color:var(--danger-ink); }
.doc-rename{ display:flex; gap:8px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.doc-rename[hidden]{ display:none; }
.doc-rename__input{ flex:1; min-width:0; font-size:14px; padding:9px 14px; }
/* obra data + next-document row */
.obra-data{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-1); padding:0; margin:6px 0 16px; }
.obra-data__head{ display:flex; align-items:center; gap:8px; padding:15px 20px; cursor:pointer; font-size:13.5px; font-weight:500; color:var(--ink); list-style:none; }
.obra-data__head::-webkit-details-marker{ display:none; }
.obra-data__head i{ color:var(--ink-faint); font-size:16px; }
.obra-data__hint{ margin-left:auto; font-size:11.5px; font-weight:400; color:var(--ink-faint); text-align:right; }
.obra-data__form{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:10px; align-items:end; padding:2px 20px 18px; }
.obra-data__form label{ display:flex; flex-direction:column; gap:5px; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); min-width:0; }
.obra-data__form input{ padding:9px 12px; font-size:13px; width:100%; }
@media (max-width:820px){ .obra-data__form{ grid-template-columns:1fr; } .obra-data__hint{ display:none; } }
.obra-next{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 22px; }
.obra-next__label{ font-size:12.5px; color:var(--ink-faint); margin-right:2px; }
.obra-next__tool{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-strong); border-radius:999px;
height:36px; padding:0 16px; font-size:13px; color:var(--ink); background:transparent; transition:background .15s ease; }
.obra-next__tool:hover{ background:var(--canvas-deep); }
.obra-next__tool i{ color:var(--ink-faint); font-size:14px; }
.obra-next__done{ display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--st-ready-ink); }
.link-strong{ font-size:14px; color:var(--accent-ink); font-weight:500; display:inline-flex; align-items:center; gap:5px; }
.link-strong:hover{ text-decoration:underline; text-underline-offset:3px; }
/* the row-wide tap target: phone only (see .doc-item__tap below) */
.doc-item{ position:relative; }
.doc-item__tap{ display:none; }
@media (max-width:640px){
.doc-item__main{ flex-wrap:wrap; row-gap:10px; }
.doc-item__body{ flex:1 1 100%; order:2; }
.doc-pick{ order:1; }
.doc-item__icon{ order:1; width:36px; height:36px; font-size:17px; }
.doc-item__main > .badge, .doc-item__main > .badge--preview{ order:1; margin-left:auto; }
.doc-item__main > .btn, .doc-item__main > .icon-btn, .doc-item__main > .icon-form,
.doc-item__main > .doc-item__gone{ order:3; }
.doc-item__main > .btn{ margin-left:auto; }
.doc-item__name{ white-space:normal; overflow-wrap:anywhere; }
}
/* PHONE: Mis documentos is a clean list of names. Every control on the row (download, PDF,
rename, delete, the zip checkbox) moves to the document's own page, one tap away — five
targets per row on a 375px screen was the clutter. Desktop keeps them all inline.
The link is laid OVER the row rather than wrapping it, so the row's markup — and the
desktop layout that depends on it — is untouched. */
@media (max-width:560px){
.doc-item__tap{ display:block; position:absolute; inset:0; z-index:2; }
.doc-item__main > .doc-pick,
.doc-item__main > .btn,
.doc-item__main > .icon-btn,
.doc-item__main > .icon-form{ display:none; }
.doc-item__main{ flex-wrap:nowrap; row-gap:0; padding-right:18px; }
.doc-item__body{ flex:1 1 auto; order:0; }
.doc-item__icon{ order:-1; }
/* the chevron that says "this row opens" */
.doc-item::after{ content:"\ea61"; font-family:"tabler-icons"; position:absolute;
right:16px; top:50%; transform:translateY(-50%);
font-size:17px; color:var(--ink-faint); }
}
/* ---- Equipo: the studio's seats ---- */
.team__meter{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px;
color:var(--ink-soft); background:var(--surface); border-radius:var(--radius-sm);
padding:12px 16px; margin:20px 0 14px; }
.team__meter i{ font-size:17px; color:var(--ink-faint); }
.team__list{ margin-bottom:22px; }
.team__you{ font-size:11.5px; color:var(--ink-faint); font-weight:400; }
.team__invite{ display:flex; flex-direction:column; gap:7px; max-width:520px; }
.team__inviterow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.team__inviterow .login__input{ flex:1 1 240px; min-width:0; }
.team__hint{ font-size:12.5px; color:var(--ink-faint); line-height:1.5; }
.team__link{ display:inline-block; margin-top:5px; font-size:12px; background:var(--canvas-deep);
border-radius:6px; padding:3px 7px; overflow-wrap:anywhere; }
.doc-filter--who{ margin-bottom:14px; }
.login__check{ display:flex; align-items:flex-start; gap:9px; margin-top:16px;
font-size:13px; color:var(--ink-soft); line-height:1.45; }
.login__check input{ margin-top:2px; flex:none; }
/* ---- one document's own page (where the phone list taps through to) ---- */
.doc-page__head{ display:flex; align-items:flex-start; gap:16px; margin:22px 0 26px; }
.doc-page__icon{ width:56px; height:56px; flex:none; border-radius:18px; background:var(--canvas-deep);
color:var(--ink-soft); display:flex; align-items:center; justify-content:center; font-size:26px; }
.doc-page__id{ flex:1; min-width:0; }
.doc-page__name{ font-family:var(--font-display); font-size:clamp(22px, 4vw, 30px); font-weight:500;
letter-spacing:-.01em; line-height:1.15; color:var(--ink); overflow-wrap:anywhere; margin:0; }
.doc-page__meta{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px;
font-size:13.5px; color:var(--ink-faint); }
.doc-page__meta span{ display:inline-flex; align-items:center; gap:6px; }
.doc-page__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.doc-page__gone{ font-size:14px; color:var(--ink-faint); display:flex; align-items:center; gap:8px; margin-bottom:26px; }
.doc-page__manage{ display:flex; flex-wrap:wrap; gap:10px; align-items:center;
padding-top:20px; border-top:1px solid var(--line); }
.doc-page__del{ margin:0; }
.btn--danger{ color:var(--danger, #A3352B); }
.doc-page__rename{ margin-top:18px; }
@media (max-width:560px){
.doc-page__actions .btn{ width:100%; justify-content:center; }
}
/* ---------------------------------------------------------------
10 · WIZARD — the atmosphere flow
--------------------------------------------------------------- */
/* Wizard chrome: FLAT clear canvas — the elements float on top of it (soft-UI reference).
Two elevation recipes: --float for light surfaces, --float-dark for navy pieces. */
/* overflow:hidden — the tool shell IS the viewport. Its stage scrolls internally, so
nothing inside has any business scrolling the page; without this a few px of stray
overflow leaked out and took the footer below the fold with it. */
.app--tool{ display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; position:relative; isolation:isolate;
background:var(--canvas);
--float:0 1px 2px rgba(28,26,23,.05), 0 10px 24px rgba(28,26,23,.09), 0 28px 56px rgba(28,26,23,.07);
--float-dark:0 2px 4px rgba(30,42,56,.28), 0 12px 28px rgba(30,42,56,.32); }
.app--tool > .toolbar, .app--tool > .rail, .app--tool > .rail__hint, .app--tool > .notice{ flex:none; }
.app--tool > form{ flex:1; min-height:0; display:flex; flex-direction:column; }
/* overscroll-behavior:contain — when the stage hits its end, the scroll STOPS there
instead of handing the gesture to the page behind it (the iOS rubber-band that makes
the whole screen, footer included, slide under your finger) */
.app--tool > form > .stage{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.app--tool > .stage.proc{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.app--tool > form > .footer{ flex:none; }
.app--tool > .result{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.app--tool > .footer{ flex:none; }
.toolbar{ display:flex; align-items:center; gap:14px; padding:18px 32px 10px; border-bottom:0; }
.toolbar__back{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:14px;
font-size:18px; color:var(--ink-soft); border:none; background:var(--surface); box-shadow:var(--float); transition:background .15s ease; }
.toolbar__back:hover{ background:var(--surface); color:var(--ink); }
.toolbar__title{ font-family:var(--font-display); font-size:20px; font-weight:500; letter-spacing:-.01em; color:var(--ink); }
a.toolbar__title:hover{ color:var(--ink-soft); }
.toolbar__step{ margin-left:auto; font-size:13px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
/* stepper: a floating tray of numbered squircles (soft-UI pagination reference) —
the current step is the one navy piece, physically lifted off the tray */
.rail{ display:flex; align-items:flex-start; justify-content:center; gap:10px; padding:12px 18px;
margin:14px auto 4px; width:max-content; max-width:calc(100% - 36px);
background:var(--surface); border-radius:22px; box-shadow:var(--float); }
.rail__step{ display:flex; flex-direction:column; align-items:center; gap:6px; width:84px; }
.rail__dot{ width:34px; height:34px; border-radius:12px; display:flex; align-items:center; justify-content:center;
font-size:13px; font-variant-numeric:tabular-nums; transition:background .2s ease, color .2s ease, box-shadow .2s ease; }
.rail__dot--todo{ background:var(--canvas-deep); color:var(--ink-faint); }
.rail__dot--done{ background:var(--canvas-deep); color:var(--st-ready-ink); }
.rail__dot--done i{ font-size:14px; }
.rail__dot--active{ background:var(--dark); color:var(--dark-ink); font-weight:600; box-shadow:var(--float-dark); }
.rail__label{ font-size:11.5px; color:var(--ink-faint); }
.rail__label--active{ color:var(--ink); font-weight:500; }
.rail__line{ display:none; }
.rail__hint{ text-align:center; font-size:13px; color:var(--ink-soft); margin-top:12px; }
/* the stage: content panel column */
.stage{ padding:22px 26px 30px; max-width:760px; margin:0 auto; width:100%; }
.app--tool > form > .stage:not(.proc){ display:flex; flex-direction:column; }
.app--tool > form > .stage:not(.proc)::before{ content:""; flex:0.6 1 0; min-height:0; }
.app--tool > form > .stage:not(.proc)::after{ content:""; flex:1 1 0; min-height:0; }
.app--tool > form > .stage:not(.proc) > *{ flex:none; }
.narration{ display:flex; gap:12px; margin-bottom:20px; }
.narration--tight{ margin-top:8px; }
.narration__avatar{ width:32px; height:32px; border-radius:50%; background:var(--accent-bg); flex-shrink:0;
display:flex; align-items:center; justify-content:center; color:var(--accent-ink); font-size:16px; box-shadow:0 1px 2px rgba(28,26,23,.06), 0 5px 12px rgba(28,26,23,.08); }
.narration__text{ font-size:15.5px; line-height:1.6; color:var(--ink-soft); padding-top:4px; }
.obra-field{ margin-bottom:18px; }
.obra-field__label{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; margin-bottom:7px; }
.obra-field__opt{ text-transform:none; letter-spacing:0; color:var(--ink-faint); font-weight:400; }
.obra-field__input{ width:100%; font-size:14.5px; padding:12px 15px; }
.obra-field__hint{ font-size:12.5px; color:var(--ink-faint); margin-top:6px; }
.obra-reuse{ display:flex; align-items:flex-start; gap:9px; background:var(--surface); border:none;
border-radius:var(--radius-sm); padding:12px 15px; margin:0 0 16px; font-size:13px; color:var(--ink-soft); line-height:1.5; box-shadow:var(--float, var(--shadow-1)); }
.obra-reuse i{ color:var(--positive); font-size:16px; flex-shrink:0; margin-top:1px; }
/* upload well: glass panel + inner deep well (no dashed rectangle) */
.dropzone{ display:flex; flex-direction:column; align-items:center; background:var(--surface);
border:none; border-radius:var(--radius-lg); box-shadow:var(--float, var(--shadow-2));
padding:48px 32px; text-align:center; cursor:pointer; transition:box-shadow .2s ease, transform .2s ease; }
.dropzone:hover{ box-shadow:var(--float, var(--shadow-2)); }
.dropzone.upload--over, .photo-area.upload--over{ box-shadow:0 0 0 3px var(--accent-soft), var(--float, var(--shadow-2)); transform:scale(1.005); }
.dropzone__icon{ width:64px; height:64px; border-radius:22px; background:var(--canvas);
box-shadow:0 1px 2px rgba(28,26,23,.06), 0 6px 14px rgba(28,26,23,.09);
color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:18px; }
.dropzone__prompt{ font-size:18px; font-weight:500; color:var(--ink); }
.dropzone__hint{ font-size:14px; color:var(--ink-faint); margin:8px 0 20px; max-width:46ch; }
.dropzone__btn{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; height:40px; padding:0 20px;
border-radius:999px; background:transparent; color:var(--ink); border:1px solid var(--line-strong); }
.dropzone:hover .dropzone__btn{ background:var(--canvas-deep); }
.dropzone input[type=file], .photo-area input[type=file]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.dropzone[hidden]{ display:none; }
.dropzone__files{ display:flex; flex-direction:column; gap:6px; width:100%; max-width:380px; margin-top:18px; }
.dropzone__files:empty{ display:none; }
.dropzone__file{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); background:var(--surface);
border:1px solid var(--line); border-radius:10px; padding:9px 13px; text-align:left; }
.dropzone__file i{ color:var(--ink-faint); flex-shrink:0; }
.file-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm); background:var(--canvas-deep); text-align:left; margin-bottom:8px; }
.file-row__name{ font-size:13px; color:var(--ink); }
.file-row i:last-child{ margin-left:auto; color:var(--positive); }
.photo-area{ display:block; background:var(--surface); border:none; border-radius:var(--radius-md);
box-shadow:var(--float, var(--shadow-1)); padding:18px 20px; margin-bottom:12px; transition:box-shadow .15s ease; }
.photo-area:hover{ box-shadow:var(--float, var(--shadow-2)); }
.photo-area__head{ display:flex; align-items:center; gap:13px; }
.photo-area__head > i{ width:40px; height:40px; border-radius:12px; background:var(--canvas-deep); color:var(--ink-soft);
display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.photo-area__text{ flex:1; min-width:0; }
.photo-area__section{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:2px; }
.photo-area__label{ font-size:14.5px; font-weight:500; color:var(--ink); }
.photo-area__hint{ font-size:13px; color:var(--ink-faint); margin-top:2px; }
.photo-area__actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; }
.photo-area__btn{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; height:36px; padding:0 15px;
border-radius:999px; border:1px solid var(--line-strong); background:transparent; color:var(--ink);
flex-shrink:0; cursor:pointer; transition:background .15s ease; }
.photo-area__btn:hover{ background:var(--canvas-deep); }
.photo-area__cam{ display:none; }
.photo-area__btn--cam{ display:none; }
.photo-area__lbl--touch{ display:none; }
@media (max-width:1024px), (hover:none) and (pointer:coarse){
.photo-area__btn--cam{ display:inline-flex; }
.photo-area__lbl--wide{ display:none; }
.photo-area__lbl--touch{ display:inline; }
}
@media (max-width:560px){
.photo-area__head{ flex-wrap:wrap; }
.photo-area__actions{ flex:1 0 100%; margin-top:12px; }
.photo-area__btn{ flex:1; justify-content:center; }
}
.dropzone__files--thumbs{ flex-direction:row; flex-wrap:wrap; gap:10px; max-width:none; }
.dropzone__files--thumbs:not(:empty){ margin-top:14px; }
.upload-thumb-cell{ position:relative; width:74px; height:74px; }
.upload-thumb-cell[draggable=true]{ cursor:grab; }
.upload-thumb-cell.dragging{ opacity:.4; }
.upload-thumb{ width:74px; height:74px; object-fit:cover; border-radius:12px; border:1px solid var(--line-strong); display:block; }
.upload-thumb__ord{ position:absolute; top:5px; left:5px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
background:rgba(30,42,56,.85); color:var(--dark-ink); font-size:11px; font-weight:500;
display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.upload-thumb__rm{ position:absolute; top:-7px; right:-7px; width:21px; height:21px; border-radius:50%; border:1px solid var(--line-strong);
background:var(--surface); color:var(--ink); font-size:14px; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-1); padding:0; }
.upload-thumb__rm:hover{ background:var(--accent-bg); color:var(--danger-ink); }
.photo-confirm{ display:flex; flex-direction:column; gap:12px; background:var(--amber-bg-soft); border:1px solid var(--amber-line);
border-radius:var(--radius-md); padding:18px 20px; margin-top:16px; }
.photo-confirm[hidden]{ display:none; }
.photo-confirm__msg{ display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--st-pending-ink); line-height:1.5; }
.photo-confirm__msg i{ color:var(--st-pending); font-size:19px; flex-shrink:0; }
.photo-confirm__actions{ display:flex; gap:10px; flex-wrap:wrap; }
/* photos this area already holds, shown so "add one more" is never "replace them all" */
.photo-area__saved{ margin:14px 0 4px; }
.photo-area__savedhint{ font-size:12.5px; color:var(--ink-soft); margin-bottom:8px; }
.saved-thumbs{ display:flex; flex-wrap:wrap; gap:8px; }
.saved-thumbs .upload-thumb-cell{ position:relative; }
.photo-area__reorder{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft); margin-top:12px; }
.photo-area__reorder[hidden]{ display:none; }
.photo-area__reorder i{ font-size:16px; color:var(--ink-faint); }
.privacy-note{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:16px 0 0; max-width:660px; }
.privacy-note i{ color:var(--ink-faint); font-size:15px; flex-shrink:0; margin-top:1px; }
.privacy-note a{ color:var(--accent-ink); white-space:nowrap; text-decoration:underline; text-underline-offset:2px; }
.ai-note{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-faint); margin:10px 2px 0; }
.ai-note::before{ content:"\2139"; font-size:11px; opacity:.8; }
.notice{ display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line);
border-radius:var(--radius-sm); padding:11px 15px; margin:0 auto 16px; max-width:680px; font-size:13px; color:var(--ink-soft); }
.notice i{ color:var(--ink-faint); }
.notice[hidden]{ display:none; }
.notice--warn{ background:var(--amber-bg-soft); border-color:var(--amber-line); color:var(--st-pending-ink); }
.notice--warn i{ color:var(--st-pending); }
.notice--info{ background:var(--surface); border-color:var(--line); color:var(--ink-soft); }
.notice--info i{ color:var(--positive); }
.preview-banner{ display:flex; align-items:center; gap:9px; background:var(--amber-bg-soft); border:1px solid var(--amber-line);
border-radius:var(--radius-sm); padding:11px 15px; margin:0 auto 16px; max-width:680px; font-size:13px; color:var(--st-pending-ink); }
.preview-banner i{ color:var(--st-pending); font-size:18px; }
/* ---- site capture (the hero step) — glass card, dark mic ---- */
.app--tool > form > .stage.stage--capture{ display:flex; flex-direction:column; gap:12px; padding:14px 26px 8px; }
.app--tool > form > .stage.stage--capture::before, .app--tool > form > .stage.stage--capture::after{ content:none; }
.app--tool > form > .stage.stage--capture > .cap-card{ flex:0 0 auto; }
.cap-card{ position:relative; background:var(--surface); border:none;
border-radius:var(--radius-lg); box-shadow:var(--float); padding:10px; }
.cap-transcript{ display:block; width:100%; font-family:var(--font-ui); font-size:17px; line-height:1.6; color:var(--ink);
background:transparent; border:none; border-radius:0; padding:16px 14px 56px; resize:none;
min-height:216px; max-height:44vh; overflow-y:auto; }
.cap-transcript:focus{ outline:none; border:none; box-shadow:none; }
.cap-form.is-recording .cap-card{ box-shadow:0 0 0 3px var(--accent-soft), var(--float); }
.cap-form.is-recording .cap-transcript{ border:none; box-shadow:none; }
.cap-card__bar{ position:absolute; left:14px; right:14px; bottom:14px; display:flex; align-items:center;
justify-content:space-between; gap:10px; pointer-events:none; }
.cap-card__bar > *{ pointer-events:auto; }
.cap-card__tools{ display:flex; align-items:center; gap:4px; }
.cap-tool{ width:40px; height:40px; flex-shrink:0; border-radius:14px; border:none; background:var(--canvas);
box-shadow:0 1px 2px rgba(28,26,23,.06), 0 5px 12px rgba(28,26,23,.08);
color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:17px;
transition:background .15s ease, color .15s ease; }
.cap-tool:hover{ background:var(--canvas-deep); color:var(--ink); }
.cap-tool.cap-attach--on{ background:var(--dark); color:var(--dark-ink); box-shadow:var(--float-dark); }
.cap-card__mic{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.cap-card__hint{ font-size:13px; color:var(--ink-soft); white-space:nowrap; }
.cap-form.is-recording .cap-card__hint{ color:var(--accent-ink); font-weight:500; }
.cap-form.is-unsupported .cap-card__mic{ display:none; }
.cap-faith{ display:flex; align-items:flex-start; gap:7px; font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.cap-faith i{ color:var(--ink-faint); font-size:14px; flex-shrink:0; margin-top:1px; }
.cap-privacy{ font-size:11.5px; color:var(--ink-faint); line-height:1.5; margin:0; }
.cap-privacy i{ color:var(--ink-faint); font-size:13px; vertical-align:-2px; margin-right:4px; }
.cap-privacy a{ color:var(--accent-ink); white-space:nowrap; }
/* the one-line phone version of cap-faith + cap-privacy — swapped in below 560px */
.cap-legal-sm{ display:none; font-size:11.5px; color:var(--ink-faint); line-height:1.45; margin:0; }
.cap-legal-sm i{ font-size:13px; vertical-align:-2px; margin-right:4px; }
.cap-legal-sm a{ color:var(--accent-ink); white-space:nowrap; }
@media (max-width:560px){
.cap-faith, .cap-privacy{ display:none; }
.cap-legal-sm{ display:block; }
}
.cap-file-input{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.cap-files{ display:flex; flex-wrap:wrap; gap:7px; }
.cap-file-chip{ display:inline-flex; align-items:center; gap:7px; max-width:100%; background:var(--surface);
border:1px solid var(--line); border-radius:999px; padding:6px 8px 6px 14px; font-size:12.5px; color:var(--ink); }
.cap-file-chip i{ font-size:15px; flex-shrink:0; color:var(--ink-faint); }
.cap-file-chip__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cap-file-chip__x{ display:flex; align-items:center; justify-content:center; width:20px; height:20px; flex-shrink:0;
border:none; border-radius:50%; background:transparent; color:var(--ink-faint); cursor:pointer; font-size:14px; }
.cap-file-chip__x:hover{ background:var(--canvas-deep); color:var(--ink); }
.cap__fallback{ display:flex; align-items:flex-start; gap:9px; background:var(--amber-bg-soft); border:1px solid var(--amber-line);
border-radius:var(--radius-sm); padding:13px 15px; font-size:13.5px; line-height:1.5; color:var(--st-pending-ink); }
.cap__fallback[hidden]{ display:none; }
.cap__fallback > i{ color:var(--st-pending); font-size:18px; flex-shrink:0; margin-top:1px; }
.cap__fallback-body{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.cap__fallback-up{ display:inline-flex; align-items:center; gap:7px; background:var(--dark); color:var(--dark-ink);
border:none; border-radius:999px; height:38px; padding:0 17px; font-size:13px; cursor:pointer; }
.cap__fallback-up:hover{ background:var(--dark-2); }
.cap-mic{ display:none; flex-direction:column; align-items:center; gap:7px; }
/* the mic: dark circle; recording = accent glow ring + sonar */
.cap__rec{ position:relative; width:72px; height:72px; border-radius:50%; background:var(--dark); color:var(--dark-ink);
border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:29px;
box-shadow:var(--float-dark, var(--shadow-2));
transition:transform .12s ease, box-shadow .2s ease, background .15s ease; }
.cap__rec[hidden]{ display:none; }
.cap__rec--sm{ width:44px; height:44px; font-size:20px; }
.cap__rec:hover{ transform:scale(1.04); }
.cap__rec:active{ transform:scale(.95); }
.cap__rec--on{ background:var(--accent); color:#241206; box-shadow:0 0 0 6px var(--accent-soft); }
.cap__rec--on::before, .cap__rec--on::after{ content:""; position:absolute; inset:-2px; border-radius:50%;
border:2px solid var(--accent); opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: no-preference){
.cap__rec--on{ animation:capPop .35s cubic-bezier(.34,1.56,.64,1), capBreathe 1.9s ease-in-out .35s infinite; }
.cap__rec--on::before{ animation:capSonar 1.9s ease-out infinite; }
.cap__rec--on::after{ animation:capSonar 1.9s ease-out .95s infinite; }
@keyframes capPop{ from{ transform:scale(.86); } to{ transform:scale(1); } }
@keyframes capBreathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
@keyframes capSonar{ 0%{ transform:scale(1); opacity:.55; } 75%{ transform:scale(1.9); opacity:0; } 100%{ transform:scale(1.9); opacity:0; } }
}
.cap__status{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); min-height:18px; }
.cap__status[data-state="recording"]{ color:var(--accent-ink); font-weight:500; }
.cap__dot{ width:7px; height:7px; border-radius:50%; background:var(--line-3); flex-shrink:0; }
.cap__status[data-state="recording"] .cap__dot{ background:var(--accent); animation:capBlink 1.05s ease-in-out infinite; }
@keyframes capBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.2; } }
@media (prefers-reduced-motion: reduce){ .cap__status[data-state="recording"] .cap__dot{ animation:none; } }
@media (max-width:1024px), (hover:none) and (pointer:coarse){
.cap-mic{ display:flex; }
.cap-card__mic{ display:none; }
}
.cap-form.is-unsupported .cap-mic{ display:none; }
.cap-photos{ display:flex; flex-direction:column; gap:8px; }
.cap-photos__head{ display:flex; align-items:center; gap:8px; }
.cap-photos__label{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.cap-photos__label i{ font-size:14px; }
.cap-photos__prior{ font-size:11.5px; color:var(--ink-soft); }
.cap-photos__row{ display:flex; flex-wrap:wrap; gap:8px; }
.cap-photo{ position:relative; width:62px; height:62px; border-radius:12px; overflow:hidden; background:var(--canvas-deep); }
.cap-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.cap-photo__x{ position:absolute; top:3px; right:3px; width:20px; height:20px; border:none; border-radius:50%;
background:rgba(28,26,23,.62); color:var(--dark-ink); display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; }
.cap-photos[hidden]{ display:none; }
#cap-video-form{ position:absolute; width:0; height:0; overflow:hidden; }
@media (max-width:520px){ .cap__rec{ width:64px; height:64px; font-size:27px; } }
/* ---- review gate ---- */
.chapter-group{ margin-bottom:10px; }
.chapter-group>summary{ list-style:none; cursor:pointer; }
.chapter-group>summary::-webkit-details-marker{ display:none; }
.chapter{ display:flex; align-items:center; justify-content:space-between; padding:17px 20px; background:var(--surface);
border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-1); }
.chapter__head{ display:flex; align-items:center; gap:12px; }
.chapter__chev{ font-size:18px; color:var(--ink-faint); }
.chapter__title{ font-size:15.5px; font-weight:500; color:var(--ink); }
.chapter__count{ font-size:12.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.chapter-body{ border:1px solid var(--line); border-top:0; border-radius:0 0 var(--radius-sm) var(--radius-sm);
background:var(--surface); margin-top:-2px; }
.chapter-group[open]>summary .chapter{ border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.chapter--attention{ display:block; padding:0; border:1px solid var(--amber-line); border-radius:var(--radius-sm);
overflow:hidden; margin-bottom:10px; background:var(--surface); box-shadow:var(--shadow-1); }
.chapter__open{ display:flex; align-items:center; justify-content:space-between; padding:17px 20px; background:var(--amber-bg-soft); }
.chapter--attention .chapter__chev{ color:var(--st-pending-ink); }
.chapter--attention__body{ padding:2px 0 4px; }
.field-row{ display:flex; align-items:center; gap:12px; padding:13px 20px; border-top:1px solid var(--line); }
.chapter--attention .field-row{ border-top:1px solid var(--amber-line); }
.field-row__label{ font-size:13.5px; color:var(--ink-soft); width:160px; flex-shrink:0; }
.field-row i:first-child{ color:var(--positive); flex-shrink:0; font-size:16px; }
.field-row__input{ flex:1; min-width:0; font-size:14px; padding:10px 13px; }
textarea.field-row__input{ min-height:68px; resize:vertical; line-height:1.5; }
/* single VALUES rendered as wrapping boxes: every character visible, no clipping */
textarea.js-value{ display:block; width:100%; min-height:40px; height:auto; resize:none; overflow:hidden;
line-height:1.45; white-space:pre-wrap; word-break:break-word; font:inherit; font-size:14px;
box-sizing:border-box; }
.field-row > textarea.js-value{ flex:1; min-width:0; width:auto; }
.looptbl td textarea.js-value{ width:100%; font-size:13.5px; padding:8px 11px; border-radius:10px; }
.field-row--block{ display:block; padding:12px 20px; }
.field-row--block .field-row__label{ width:auto; display:block; margin-bottom:6px; }
.field-row--flag i:first-child{ color:var(--st-pending); }
.field-row--flag .field-row__flaghead{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500;
color:var(--st-pending-ink); margin-bottom:8px; }
.field-row--flag .field-row__flaghead i{ color:var(--st-pending); font-size:17px; }
.field-row--flag .field-row__input{ border-color:var(--amber-line); }
.field-row--flag .field-row__input:focus{ border-color:var(--st-pending); box-shadow:0 0 0 3px var(--st-pending-bg); }
.field-row__flaghead{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; margin-bottom:8px; }
.field-problem{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--st-pending-ink); margin-top:7px; }
.field-problem i{ color:var(--st-pending); font-size:15px; }
.field-tag{ flex-shrink:0; font-size:11px; color:var(--ink-faint); display:inline-flex; align-items:center; gap:4px; cursor:default; align-self:center; }
.field-tag--prose{ padding:4px 11px; border-radius:999px; background:var(--accent-bg); color:var(--accent-ink); }
.field-tag--prose i{ font-size:12px; }
.field-tag--studio{ padding:4px 11px; border-radius:999px; background:var(--canvas-deep); color:var(--ink-soft); }
.field-tag--studio i{ font-size:12px; }
.field-tag[data-tip]:hover::after, .field-tag[data-tip]:focus-visible::after{ left:auto; right:0; }
.field-tag[data-tip]:hover::before, .field-tag[data-tip]:focus-visible::before{ left:auto; right:14px; }
.field-info{ display:inline-flex; align-items:center; margin-left:5px; padding:2px; background:none; border:0;
color:var(--ink-faint); cursor:pointer; vertical-align:middle; border-radius:5px; }
.field-info i{ font-size:14px; }
.field-info:hover, .field-info[aria-expanded="true"]{ color:var(--accent-ink); }
.field-desc{ display:flex; gap:7px; align-items:flex-start; font-size:12.5px; line-height:1.55; color:var(--ink-soft);
background:var(--canvas-deep); border-radius:10px; padding:9px 13px; margin:0 20px 10px 47px; overflow-wrap:anywhere; }
.field-row--block .field-desc, .gap .field-desc{ margin:2px 0 10px; }
.field-desc i{ font-size:13px; margin-top:2px; color:var(--ink-faint); flex-shrink:0; }
.field-desc[hidden]{ display:none; }
.gap{ padding:14px 20px; border-top:1px solid var(--amber-line); background:var(--amber-bg-soft); }
.gap__q{ display:flex; align-items:center; gap:8px; margin-bottom:9px; font-size:14px; color:var(--st-pending-ink); font-weight:500; }
.gap__q i{ color:var(--st-pending); font-size:17px; }
.gap__input{ width:100%; font-size:14px; padding:10px 13px; }
.gap__input:focus{ border-color:var(--st-pending); box-shadow:0 0 0 3px var(--st-pending-bg); }
.gap__context{ margin:0 0 9px; padding:9px 13px; background:var(--surface); border:1px solid var(--line);
border-radius:10px; font-size:13.5px; color:var(--ink-soft); font-style:italic; line-height:1.5; }
.gap__blank{ display:flex; align-items:flex-start; gap:8px; margin:9px 0 0; font-size:13px; color:var(--st-pending-ink); cursor:pointer; line-height:1.45; }
.gap__blank input{ margin:1px 0 0; flex:none; accent-color:var(--accent); cursor:pointer; }
.gate-intro{ background:var(--surface); border:none; border-radius:var(--radius-md); box-shadow:var(--float, var(--shadow-1)); padding:18px 22px; margin-bottom:12px; }
.gate-intro__title{ font-family:var(--font-display); font-size:20px; font-weight:500; letter-spacing:-.01em; color:var(--ink); margin-bottom:5px; }
.gate-intro__text{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.gate-help{ display:flex; align-items:center; gap:7px; justify-content:center; font-size:12.5px; color:var(--ink-soft); margin:16px 0 0; }
.gate-help i{ color:var(--ink-faint); font-size:15px; }
.gate-help a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
.confirm-all{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); cursor:pointer; user-select:none; }
.confirm-all input{ width:17px; height:17px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.confirm-all:has(input:disabled){ color:var(--ink-faint); cursor:not-allowed; }
.confirm-all:has(input:disabled) input{ cursor:not-allowed; }
.confirm-all:has(input:checked){ color:var(--ink); }
.looptbl{ width:100%; border-collapse:collapse; table-layout:fixed; }
.looptbl th{ text-align:left; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; padding:8px 12px 5px; }
.looptbl td{ padding:2px 8px 7px; }
.looptbl input, .looptbl textarea{ width:100%; font-size:13.5px; padding:8px 11px; border-radius:10px; }
.looptbl__x{ width:30px; text-align:center; padding:0 !important; }
.looptbl__photo{ width:64px; }
.looptbl__thumb{ width:56px; height:42px; object-fit:cover; border-radius:6px; border:1px solid var(--line); display:block; }
.looptbl__nophoto{ font-size:11px; color:var(--ink-faint); }
.looptbl__hint{ font-size:12.5px; color:var(--ink-soft); margin:2px 0 8px; }
.looptbl__trailer td{ border-top:1px solid var(--line); padding-top:7px; }
.looptbl__trailer .looptbl__const{ display:block; padding:8px 11px; font-size:13.5px; font-weight:500; color:var(--ink); }
.looptbl textarea.is-missing{ border-color:var(--amber-line); background:var(--st-pending-bg); }
/* a cell shorter than that column ever is in the studio's own documents: asked about, not changed */
.looptbl textarea.is-short{ border-color:var(--amber-line); }
.looptbl td .field-problem{ margin-top:5px; font-size:12px; align-items:flex-start; max-width:26em; }
.row-rm{ background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:17px; line-height:1; padding:4px 6px; border-radius:6px; }
.row-rm:hover{ color:var(--danger-ink); background:var(--accent-bg); }
.row-add{ display:inline-flex; align-items:center; gap:5px; background:none; border:1px dashed var(--line-3); color:var(--ink-soft);
border-radius:999px; padding:7px 14px; font-size:12.5px; cursor:pointer; margin-top:8px; }
.row-add:hover{ border-color:var(--ink-soft); background:var(--surface); }
.row-add i{ font-size:14px; }
.signer-pick{ background:var(--surface); border:none; border-radius:var(--radius-md); box-shadow:var(--float, var(--shadow-1)); padding:16px 18px; margin-bottom:14px; }
.signer-pick__q{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--ink); margin-bottom:10px; }
.signer-pick__q i{ color:var(--ink-faint); font-size:18px; }
.signer-pick__opts{ display:flex; flex-wrap:wrap; gap:8px; }
/* ---- Revisión gate: read-only "Fotos" summary (photos change only via Atrás) ---- */
.gate-photos{ background:var(--surface); border:none; border-radius:var(--radius-md);
box-shadow:var(--float, var(--shadow-1)); padding:14px 18px; margin-bottom:14px; }
.gate-photos__title{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500;
color:var(--ink-soft); margin-bottom:10px; }
.gate-photos__title i{ color:var(--ink-faint); font-size:16px; }
.gate-photos__area{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:8px 0;
border-top:1px solid var(--line); }
.gate-photos__area:first-of-type{ border-top:none; padding-top:0; }
.gate-photos__label{ font-size:13.5px; color:var(--ink); flex-shrink:0; min-width:160px; }
.gate-photos__thumbs{ display:flex; flex-wrap:wrap; gap:6px; }
.gate-photos__thumb{ width:96px; height:96px; max-width:96px; max-height:96px; object-fit:cover;
border-radius:10px; border:1px solid var(--line-strong); display:block; }
.gate-photos__count{ font-size:12.5px; color:var(--ink-faint); }
.gate-photos__none{ font-size:12.5px; color:var(--ink-faint); font-style:italic; }
/* ---- wizard footer: floating glass bar ---- */
.footer{ display:flex; align-items:center; justify-content:space-between; padding:13px 22px; gap:10px; flex-wrap:wrap; }
.footer__actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; min-width:0; }
.footer__note{ font-size:12px; color:var(--ink-faint); }
.wfoot{ display:block; padding:12px 16px 18px; border-top:0; background:transparent; }
.wfoot__inner{ max-width:760px; margin:0 auto; width:100%;
background:var(--surface); border:none; border-radius:24px; box-shadow:var(--float, var(--shadow-2));
display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; padding:8px 12px 8px 18px; }
.wfoot__inner--wide{ max-width:1040px; }
.hidden-default{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.wfoot__left{ order:1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wfoot__backform{ margin:0; }
.wfoot__mid{ order:2; display:flex; align-items:center; justify-content:center; }
.wfoot__right{ order:3; display:flex; align-items:center; gap:14px; flex-wrap:nowrap; justify-content:flex-end; min-width:0; }
.wfoot__right > .btn{ flex:0 0 auto; }
.wfoot__right > .wfoot__hint, .wfoot__right > .confirm-all{ min-width:0; }
.wfoot__hint{ font-size:12.5px; color:var(--ink-soft); text-align:right; line-height:1.35; text-wrap:balance; }
.wfoot__hint:empty, .wfoot__hint[hidden]{ display:none; }
@media (max-width:520px){ .wfoot__right{ flex-wrap:wrap; } }
@media (max-width:640px){
.wfoot__inner{ border-radius:var(--radius-lg); flex-direction:column; align-items:stretch; padding:12px 14px; }
.wfoot__left{ order:2; }
.wfoot__mid{ order:1; }
.wfoot__right{ order:3; width:100%; justify-content:space-between; }
.wfoot__right .btn{ flex:1 1 auto; justify-content:center; }
/* PHONE: the footer was a quarter of the screen because the mic stacked ABOVE the
Continuar row. Put them side by side instead — the mic keeps its full size (it is the
main control here), it just stops owning a whole row of its own. Nothing is removed:
the status text stays under the mic, the hint stays above the button. */
.wfoot__inner{ flex-direction:row; align-items:center; gap:14px; padding:10px 12px; }
/* left→right reading order: Atrás · mic · Continuar. (The DOM order is primary-first so
that Enter submits rather than steps back, so the visual order is set here.) */
.wfoot__left{ order:1; flex:none; }
.wfoot__left:empty{ display:none; } /* step 1 has no Atrás — no empty gap for it */
.wfoot__mid{ order:2; flex:none; }
.wfoot__right{ order:3; flex:1; min-width:0; width:auto; flex-wrap:wrap;
flex-direction:column; align-items:stretch; gap:6px; }
.wfoot__hint{ text-align:left; }
.confirm-all{ width:100%; }
.footer{ flex-direction:column; align-items:stretch; }
.footer > .btn, .footer > a.btn{ align-self:flex-start; }
.footer__actions{ width:100%; justify-content:space-between; }
.footer__note:empty{ display:none; }
.footer__actions .btn{ flex:1 1 auto; text-align:center; justify-content:center; }
}
/* ---- result ---- */
.result{ display:flex; align-items:center; justify-content:center; padding:40px 48px; min-height:100%; }
.result__inner{ display:flex; gap:72px; align-items:center; max-width:1040px; width:100%; justify-content:center; }
.result__main{ flex:0 1 480px; }
.result__title{ font-family:var(--font-display); font-size:clamp(30px, 3.4vw, 44px); font-weight:500; letter-spacing:-.015em; line-height:1.08; color:var(--ink); }
.result__sub{ font-size:15.5px; color:var(--ink-soft); margin:12px 0 26px; line-height:1.55; }
.result__cert{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--st-ready-ink); margin:0 0 14px; }
.result__cert i{ font-size:15px; color:var(--positive); }
.result-card{ background:var(--surface); border:none; border-radius:var(--radius-lg); padding:24px; box-shadow:var(--float, var(--shadow-2)); max-width:540px; }
.result-card__row{ display:flex; align-items:center; gap:14px; }
.result-card__icon{ width:48px; height:48px; border-radius:18px; background:var(--surface); box-shadow:0 1px 2px rgba(28,26,23,.06), 0 6px 14px rgba(28,26,23,.09);
display:flex; align-items:center; justify-content:center; color:var(--positive); font-size:24px; flex-shrink:0; }
.result-card__name{ font-size:15.5px; font-weight:500; color:var(--ink); overflow-wrap:anywhere; }
.result-card__ok{ font-size:13px; color:var(--st-ready-ink); margin-top:2px; }
/* buttons are white-space:nowrap by design, so three of them can measure wider than the
card and spill out of it. Wrap instead: basis auto lets each keep its natural width,
drop to the next line when the row is full, then grow to fill it. */
.result-card__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.result-card__dl{ flex:1.6 1 auto; justify-content:center; }
.result-card__actions .btn:not(.result-card__dl){ flex:1 1 auto; justify-content:center; }
.result__more{ display:flex; flex-direction:column; gap:10px; margin-top:20px; align-items:flex-start; }
.result__link{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-ui); font-size:13.5px;
color:var(--ink-soft); font-weight:500; background:none; border:0; padding:0; cursor:pointer; }
.result__link:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.result__link i{ color:var(--ink-faint); }
/* ---- filler progress ---- */
.proc{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:340px; gap:14px; }
.proc__spinner{ display:flex; gap:8px; }
.proc__spinner span{ width:10px; height:10px; border-radius:50%; background:var(--accent); opacity:.35; animation:proc-bounce 1.1s ease-in-out infinite; }
.proc__spinner span:nth-child(2){ animation-delay:.15s; }
.proc__spinner span:nth-child(3){ animation-delay:.30s; }
@keyframes proc-bounce{ 0%,80%,100%{ transform:translateY(0); opacity:.35; } 40%{ transform:translateY(-7px); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .proc__spinner span{ animation:none; opacity:.8; } }
.proc__title{ font-family:var(--font-display); font-size:clamp(22px, 2.6vw, 30px); font-weight:500; letter-spacing:-.01em;
color:var(--ink); max-width:min(560px, 92vw); overflow-wrap:anywhere; padding:0 12px; }
.proc__sub{ font-size:14px; color:var(--ink-soft); max-width:min(520px, 90vw); padding:0 12px; }
.proc__exit{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-size:13px; color:var(--ink-soft);
height:38px; padding:0 18px; background:var(--surface); border:none; border-radius:999px; box-shadow:var(--float, var(--shadow-1));
transition:background .12s ease, color .12s ease; }
.proc__exit:hover{ background:var(--surface); color:var(--ink); }
.proc__exit i{ font-size:15px; }
.main__inner--proc{ min-height:100%; display:flex; flex-direction:column; justify-content:center; }
.main__inner--proc .proc__title{ font-size:28px; line-height:1.25; overflow-wrap:break-word; text-wrap:balance; max-width:min(500px, 88vw); }
.main__inner--proc .proc__sub{ font-size:15.5px; line-height:1.6; text-wrap:balance; max-width:min(460px, 88vw); }
/* ---------------------------------------------------------------
11 · MODALS · EMPTY STATES · SKELETONS
--------------------------------------------------------------- */
.leave{ position:fixed; inset:0; z-index:220; background:rgba(17,24,33,.45);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
display:flex; align-items:center; justify-content:center; padding:20px; }
.leave[hidden]{ display:none; }
.leave__card{ width:100%; max-width:420px; background:var(--surface-glass); -webkit-backdrop-filter:var(--blur-glass);
backdrop-filter:var(--blur-glass); border:1px solid var(--glass-edge); border-radius:var(--radius-lg);
box-shadow:var(--shadow-2); padding:28px 28px 24px; }
.leave__title{ font-family:var(--font-display); font-size:23px; font-weight:500; letter-spacing:-.01em; color:var(--ink); margin-bottom:8px; }
.leave__body{ font-size:14.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 22px; }
.leave__actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
body.onb-open{ overflow:hidden; }
.onb{ position:fixed; inset:0; z-index:200; background:rgba(17,24,33,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
display:flex; align-items:center; justify-content:center; padding:20px; }
.onb__card{ position:relative; width:100%; max-width:490px; background:var(--surface-glass);
-webkit-backdrop-filter:var(--blur-glass); backdrop-filter:var(--blur-glass); border:1px solid var(--glass-edge);
border-radius:var(--radius-lg); box-shadow:var(--shadow-2); padding:46px 34px 26px; text-align:center; }
.onb__skip{ position:absolute; top:14px; right:16px; background:none; border:0; font:inherit; font-size:12.5px; color:var(--ink-faint); cursor:pointer; padding:4px 6px; }
.onb__skip:hover{ color:var(--ink); }
.onb__step{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; margin-bottom:10px; min-height:14px; }
.onb__icons{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px; }
.onb__icon{ width:64px; height:64px; border-radius:20px; background:var(--canvas-deep); color:var(--ink-soft);
display:flex; align-items:center; justify-content:center; font-size:30px; }
.onb__icon--art{ width:96px; height:96px; border-radius:24px; padding:14px; }
.onb__sep{ color:var(--ink-faint); font-size:18px; }
.onb__title{ font-family:var(--font-display); font-size:22px; font-weight:500; color:var(--ink); line-height:1.3; letter-spacing:-.01em; }
.onb__text{ font-size:13.5px; color:var(--ink-soft); margin-top:8px; line-height:1.5; }
.onb__slide{ min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.onb__slide[hidden]{ display:none; }
.onb__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; gap:10px; flex-wrap:wrap; }
.onb__dots{ display:flex; gap:6px; }
.onb__dot{ width:7px; height:7px; border-radius:50%; background:var(--line-strong); }
.onb__dot--on{ background:var(--accent); }
@media (max-width:480px){ .onb__card{ padding:42px 20px 20px; } .onb__icon{ width:54px; height:54px; font-size:26px; } }
/* empty states: photo vignette + serif line */
.empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:0 24px 52px;
background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-xl);
box-shadow:var(--shadow-1); overflow:hidden; }
.empty-state::before{ content:""; display:block; width:calc(100% + 48px); margin:0 -24px 26px; height:150px;
background-color:var(--canvas-deep); background-image:url('/static/img/empty.webp'); background-size:cover; background-position:center 60%; }
.empty-state__icon{ display:none; }
.empty-state__title{ font-family:var(--font-display); font-size:clamp(21px, 2.4vw, 28px); font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.empty-state__text{ font-size:14px; color:var(--ink-soft); max-width:46ch; line-height:1.55; margin:0 0 18px; }
.empty-state__actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.empty-state .drafty{ margin:0 0 12px; }
/* skeleton shimmer */
.skel{ background:var(--canvas-deep); border-radius:var(--radius-sm); position:relative; overflow:hidden; }
@media (prefers-reduced-motion: no-preference){
.skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation:skel 1.4s ease infinite; }
@keyframes skel{ to{ transform:translateX(100%); } }
}
/* ---------------------------------------------------------------
12 · LOGIN · LEGAL · AJUSTES · SUSCRIPCIÓN · CALIBRAR
--------------------------------------------------------------- */
.login{ min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; isolation:isolate; }
.login::before{ content:""; position:fixed; inset:0; z-index:-2; background-image:url('/static/img/hero.webp');
background-size:cover; background-position:center; opacity:.14; filter:blur(3px) saturate(.8); }
.login::after{ content:""; position:fixed; z-index:-1; width:560px; height:560px; border-radius:50%;
background:radial-gradient(circle, var(--accent) 0%, transparent 60%); opacity:.16; filter:blur(85px);
bottom:-200px; right:-140px; }
.login__card{ width:100%; max-width:440px; background:var(--surface-glass); -webkit-backdrop-filter:var(--blur-glass);
backdrop-filter:var(--blur-glass); border:1px solid var(--glass-edge); border-radius:var(--radius-xl);
padding:44px 40px 40px; box-shadow:var(--shadow-2); }
.login__brand{ font-family:var(--font-display); font-weight:500; font-size:36px; letter-spacing:-.015em; color:var(--ink);
padding:0; margin-bottom:6px; display:flex; align-items:baseline; gap:6px; }
.login__brand::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.login__tagline{ font-size:13.5px; color:var(--ink-soft); margin:0 0 24px; line-height:1.5; }
.login__help{ font-size:12.5px; color:var(--ink-faint); margin:18px 0 0; text-align:center; }
.login__help a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
/* real consent tick at signup (registro) — never pre-ticked, links open in a new tab */
.login__consent{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px;
color:var(--ink-soft); line-height:1.5; margin:14px 0 4px; cursor:pointer; }
.login__consent input{ margin-top:2px; accent-color:var(--accent); }
.login__consent a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
.login .page-title{ font-size:24px; }
.login .page-sub{ margin-bottom:8px; }
.login__form{ display:flex; flex-direction:column; }
.login__label{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:500; color:var(--ink-faint); margin:16px 0 7px; }
.login__input{ width:100%; font-size:14.5px; padding:12px 15px; }
/* password field + reveal eye: the eye sits inside the field, never over the text */
.login__pw{ position:relative; display:flex; }
.login__pw .login__input{ padding-right:46px; }
.login__eye{ position:absolute; top:0; right:0; height:100%; width:44px; display:flex;
align-items:center; justify-content:center; background:none; border:0; padding:0;
cursor:pointer; color:var(--ink-faint); font-size:17px; border-radius:var(--radius-sm);
transition:color .15s ease; }
.login__eye:hover{ color:var(--ink); }
.login__eye:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.login__submit{ margin-top:28px; justify-content:center; }
.login__privacy{ font-size:12px; color:var(--ink-soft); margin:16px 0 0; text-align:center; display:flex; align-items:center; justify-content:center; gap:6px; }
.login__privacy i{ color:var(--ink-faint); font-size:14px; }
.login__privacy a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
.legal-page{ display:flex; justify-content:center; padding:40px 24px 64px; }
.legal{ width:100%; max-width:640px; }
.legal__brand{ font-family:var(--font-display); font-size:26px; font-weight:500; color:var(--ink); padding:0; margin-bottom:10px; }
.legal__pledge{ display:flex; align-items:flex-start; gap:10px; background:var(--surface); border:1px solid var(--line);
border-radius:var(--radius-md); box-shadow:var(--shadow-1); padding:16px 18px; margin:18px 0 26px;
font-size:14px; color:var(--ink-soft); line-height:1.55; }
.legal__pledge i{ color:var(--positive); font-size:19px; flex-shrink:0; }
.legal__h{ font-family:var(--font-display); font-size:18px; font-weight:500; color:var(--ink); margin:24px 0 7px; }
.legal p{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0; }
.legal strong{ color:var(--ink); font-weight:500; }
.legal a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
.legal__todo{ color:var(--ink-faint); font-style:italic; }
/* the published legal texts carry lists and tables the first draft never had. Kept quiet:
these pages are read once, so legibility beats decoration. */
/* the legal strip base.html puts under standalone pages (login, registro, the legal texts).
A page that already carries the public chrome, or the height-locked app shell, shows its
own copy instead — the app shell's lives in the account menu, because .shell is 100vh with
overflow hidden and a strip after it would never be reachable. */
/* AI transparency under a prose field on the gate (Reglamento (UE) 2024/1689). Quiet: it
states a fact about the text, it is not a warning the client must dismiss. */
.prose-ai{ display:flex; align-items:center; gap:6px; margin:6px 0 0;
font-size:12px; line-height:1.4; color:var(--ink-faint); }
.prose-ai i{ font-size:14px; flex-shrink:0; }
.legalfoot{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px;
padding:26px 24px 34px; font-size:12.5px; color:var(--ink-faint); }
.legalfoot a{ color:var(--ink-faint); text-decoration:none; }
.legalfoot a:hover{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
body:has(.shell) > .legalfoot, body:has(.lp__foot) > .legalfoot{ display:none; }
.account__legal{ display:flex; flex-wrap:wrap; gap:4px 12px; padding:8px 12px 4px; }
.account__legal a{ font-size:11.5px; color:rgba(239,234,227,.45); text-decoration:none; }
.account__legal a:hover{ color:var(--dark-ink); text-decoration:underline; text-underline-offset:2px; }
.legal__list{ margin:8px 0 0; padding-left:20px; }
.legal__list li{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin-bottom:6px; }
.legal__list li:last-child{ margin-bottom:0; }
.legal p + p{ margin-top:10px; }
.legal code{ font-size:12.5px; background:var(--canvas-deep); border-radius:5px; padding:1px 5px; }
/* a wide table on a phone scrolls sideways INSIDE its own box, so the page itself never does */
.legal__tablewrap{ margin:12px 0 0; overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-sm); }
.legal__table{ border-collapse:collapse; width:100%; min-width:460px; font-size:13px; }
.legal__table th, .legal__table td{ text-align:left; vertical-align:top; padding:9px 12px;
border-bottom:1px solid var(--line); color:var(--ink-soft); line-height:1.5; }
.legal__table th{ color:var(--ink); font-weight:500; background:var(--surface); white-space:nowrap; }
.legal__table tr:last-child td{ border-bottom:0; }
.legal__updated{ margin-top:28px; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-faint); }
.set-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-1); padding:6px 22px; margin-bottom:18px; }
.set-card__head{ font-size:11.5px; letter-spacing:.08em; font-weight:500; text-transform:uppercase; color:var(--ink-faint);
padding:18px 0 10px; border-bottom:1px solid var(--line); }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.set-row:last-child{ border-bottom:0; }
.set-row__label{ font-size:14px; color:var(--ink-soft); }
.set-row__value{ font-size:14px; color:var(--ink); text-align:right; }
.set-logout{ margin-top:4px; }
.set-card--form{ padding:6px 22px 20px; }
.set-form__hint{ font-size:13px; color:var(--ink-soft); margin:12px 0 4px; }
.set-field{ display:flex; align-items:center; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
.set-field:last-of-type{ border-bottom:0; }
.set-field__label{ font-size:14px; color:var(--ink-soft); width:180px; flex-shrink:0; }
/* min-width:0 is required, not cosmetic: a flex item defaults to min-width:auto, and an
's intrinsic width (~200px) then becomes a floor it cannot shrink past — with a
180px label beside it the row ran off the side of a phone screen. */
.set-field__input{ flex:1; min-width:0; font-size:14px; padding:9px 13px; }
.set-form__actions{ margin-top:16px; }
.set-subhead{ font-size:13px; font-weight:600; color:var(--ink); margin:22px 0 2px; padding-top:18px; border-top:1px solid var(--line); }
.signer-list{ display:flex; flex-direction:column; gap:10px; margin:12px 0 4px; }
.signer-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.signer-row .set-field__input{ flex:1; min-width:0; }
.theme-toggle{ display:inline-flex; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden; }
.theme-opt{ font-family:var(--font-ui); font-size:13px; padding:7px 16px; background:transparent; border:0; color:var(--ink-soft); cursor:pointer; }
.theme-opt--on{ background:var(--dark); color:var(--dark-ink); }
.pref-toggle{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; max-width:460px; }
.pref-toggle input{ margin-top:3px; width:16px; height:16px; accent-color:var(--accent); flex-shrink:0; }
.pref-toggle span{ font-size:13px; color:var(--ink-soft); line-height:1.5; text-align:left; }
.plans{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; align-items:start; max-width:920px; }
.plan{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); padding:26px; position:relative; }
.plan--featured{ background:var(--dark); color:var(--dark-ink); border-color:var(--dark); box-shadow:var(--shadow-2); }
.plan--featured .plan__name, .plan--featured .plan__price b{ color:var(--dark-ink); }
.plan--featured .plan__price span, .plan--featured .plan__feat{ color:rgba(239,234,227,.72); }
.plan--featured .plan__feat i{ color:var(--accent); }
.plan__name{ font-size:16px; font-weight:600; color:var(--ink); }
.plan__price{ margin:8px 0 18px; }
.plan__price b{ font-family:var(--font-display); font-size:34px; font-weight:500; color:var(--ink); }
.plan__price span{ font-size:13px; color:var(--ink-faint); }
.plan__feat{ display:flex; gap:8px; font-size:13px; color:var(--ink-soft); margin-bottom:11px; line-height:1.4; }
.plan__feat i{ font-size:16px; color:var(--positive); flex-shrink:0; }
.fineprint{ font-size:12px; color:var(--ink-faint); margin-top:16px; }
.badge--popular{ background:var(--accent); color:#241206; position:absolute; top:-12px; left:20px; font-size:10.5px;
letter-spacing:.05em; text-transform:uppercase; font-weight:600; padding:4px 12px; border-radius:999px; }
.badge--popular::before{ display:none; }
/* ============================================================
§19 · PUBLIC LANDING (the page a stranger reaches from a search)
Same tokens as the app — bone canvas, cream floating panels, one terracotta accent,
navy for the single primary action. Two ways forward, nothing else.
============================================================ */
/* The public pages: a normal scrolling page in the app's own palette. (The landing used
to be locked to one viewport around the video; it is a site now, so it scrolls.) */
.lp{ min-height:100vh; min-height:100dvh; background:var(--canvas);
display:flex; flex-direction:column; }
.lp__main{ flex:1; min-height:0; display:flex; flex-direction:column; }
/* ---- the public bar: one floating pill over the page, in the app's own palette ----
Sections come from config.PUBLIC_NAV; a section with no page yet is muted, not a link. */
.lpnav{ position:sticky; top:0; z-index:40; padding:14px clamp(12px, 4vw, 28px) 0; }
/* three columns — the sides take equal space, so the links sit on the bar's true centre
however wide the wordmark or the buttons happen to be */
.lpnav__bar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
gap:clamp(8px, 2vw, 22px);
/* padding stays EQUAL on both sides or the three columns are no longer symmetric and
the links drift off centre; the wordmark takes its own inset instead */
max-width:1120px; margin:0 auto; padding:9px; border-radius:999px;
background:var(--surface-glass); backdrop-filter:var(--blur-glass);
-webkit-backdrop-filter:var(--blur-glass);
border:1px solid var(--glass-edge); box-shadow:var(--shadow-1); }
.lpnav__brand{ font-family:var(--font-display); font-weight:500; font-size:21px; letter-spacing:-.015em;
color:var(--ink); display:flex; align-items:baseline; gap:5px; text-decoration:none;
flex-shrink:0; justify-self:start; padding-left:13px; }
.lpnav__brand::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.lpnav__list{ display:flex; align-items:center; justify-content:center; gap:2px;
list-style:none; margin:0; padding:0; }
.lpnav__sec{ position:relative; }
.lpnav__link{ display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:14px;
color:var(--ink-soft); text-decoration:none; padding:8px 14px; border-radius:999px;
background:none; border:none; cursor:pointer; white-space:nowrap;
transition:background .16s, color .16s; }
a.lpnav__link:hover, .lpnav__more:hover, .lpnav__more[aria-expanded="true"]{
color:var(--ink); background:var(--canvas-deep); }
.lpnav__link--soon{ color:var(--ink-faint); cursor:default; }
/* the section you are reading, marked the way the app marks a current item */
a.lpnav__link--on{ color:var(--ink); background:var(--canvas-deep); font-weight:500; }
.lpnav__soon{ font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint);
border:1px solid var(--line-strong); border-radius:999px; padding:1px 7px; }
.lpnav__more .ti{ font-size:15px; transition:transform .16s; }
.lpnav__more[aria-expanded="true"] .ti{ transform:rotate(180deg); }
/* `hidden` must win over the panel's own display (an author rule beats the UA's) */
.lpnav__panel[hidden], .lpnav__sheet[hidden]{ display:none; }
.lpnav__panel{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
width:min(340px, calc(100vw - 32px)); display:flex; flex-direction:column; gap:2px; padding:8px;
background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
box-shadow:var(--shadow-2); }
.lpnav__entry{ display:flex; flex-direction:column; gap:2px; padding:9px 12px;
border-radius:var(--radius-sm); text-decoration:none; }
a.lpnav__entry:hover{ background:var(--canvas-deep); }
.lpnav__entryt{ display:flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--ink); }
.lpnav__entry--soon .lpnav__entryt{ color:var(--ink-faint); font-weight:400; }
.lpnav__entryd{ font-size:12.5px; color:var(--ink-soft); line-height:1.45; }
.lpnav__right{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.lpnav__login{ font-size:14px; color:var(--ink); text-decoration:none; padding:9px 18px;
border-radius:999px; white-space:nowrap; border:1px solid var(--line-strong);
transition:background .16s, border-color .16s; }
.lpnav__login:hover{ background:var(--canvas-deep); border-color:var(--ink-faint); }
.lpnav__burger{ display:none; align-items:center; justify-content:center; width:40px; height:40px;
border-radius:999px; border:1px solid var(--line-strong); background:none; color:var(--ink);
font-size:19px; cursor:pointer; }
.lpnav__sheet{ max-width:1120px; margin:8px auto 0; padding:10px;
background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
box-shadow:var(--shadow-2); }
.lpnav__sheetgroup{ font-size:11px; letter-spacing:.08em; text-transform:uppercase;
color:var(--ink-faint); padding:10px 12px 4px; }
.lpnav__sheetrow .lpnav__link{ width:100%; justify-content:space-between; padding:11px 12px; }
.lpnav__bar--bare{ grid-template-columns:1fr auto; } /* pilot: wordmark · Iniciar sesión */
@media (max-width:900px){
.lpnav__list{ display:none; }
.lpnav__burger{ display:inline-flex; }
.lpnav__bar{ display:flex; justify-content:space-between; }
}
@media (max-width:420px){
.lpnav__brand{ padding-left:7px; }
.lpnav__login{ padding:9px 14px; font-size:13.5px; }
}
.lp__hero{ max-width:760px; margin:0 auto; padding:clamp(28px, 5vh, 64px) 24px 0; text-align:center; flex-shrink:0; }
.lp__title{ font-family:var(--font-display); font-weight:500; letter-spacing:-.02em; color:var(--ink);
font-size:clamp(32px, 5.6vw, 54px); line-height:1.08; margin:10px 0 18px; }
.lp__sub{ font-size:clamp(15px, 1.6vw, 17px); line-height:1.6; color:var(--ink-soft);
margin:clamp(18px, 3vh, 28px) auto 0; max-width:620px; text-align:center; }
.lp__sub em{ font-style:normal; color:var(--ink); }
.lp__cta{ text-decoration:none; }
/* the demo clip, with its one-line explanation under it */
.lp__videowrap{ display:flex; flex-direction:column; align-items:center;
padding:clamp(22px, 4vh, 44px) 24px 0; }
.lp__video{ margin:0; width:min(920px, 100%); border-radius:var(--radius-lg); overflow:hidden;
box-shadow:var(--shadow-2); aspect-ratio:16/9; }
.lp__video .video-slot__frame,
.lp__video .video-slot__poster{ height:100%; width:100%; aspect-ratio:auto; }
.lp__video .video-slot__poster{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); }
/* ---- public inner pages (precios · blog · artículo) ---- */
.lp--page .lp__page{ flex:1; width:100%; max-width:1120px; margin:0 auto;
padding:clamp(26px, 5vh, 56px) clamp(16px, 4vw, 28px) clamp(40px, 7vh, 72px); }
.lp__page--narrow{ max-width:720px; }
.lp__pagehead{ max-width:680px; margin:0 0 clamp(22px, 4vh, 38px); }
.lp__pagetitle{ font-family:var(--font-display); font-weight:500; letter-spacing:-.02em;
color:var(--ink); font-size:clamp(30px, 4.4vw, 44px); line-height:1.1; margin:0 0 12px; }
.lp__pagesub{ font-size:clamp(14.5px, 1.5vw, 16.5px); line-height:1.65; color:var(--ink-soft); margin:0; }
.lp__note{ margin:clamp(22px, 4vh, 36px) 0 0; font-size:14px; color:var(--ink-soft); }
.lp__article{ font-size:16px; line-height:1.75; color:var(--ink-soft); margin-top:22px; }
/* blog index: one card per article, placeholders included */
.posts{ display:grid; gap:clamp(12px, 2vw, 18px);
grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
.post{ display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
box-shadow:var(--shadow-1); transition:transform .16s ease, box-shadow .16s ease; }
.post:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.post__art{ aspect-ratio:16/9; background:var(--canvas-deep);
border-bottom:1px solid var(--line); }
.post__body{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:7px; }
.post__kicker{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.post__title{ font-family:var(--font-display); font-size:19px; font-weight:500; color:var(--ink);
line-height:1.25; }
.post__sum{ font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0; }
/* a card with no article yet: the shape of one, quietly */
.post--draft .post__art{ background:linear-gradient(180deg, var(--canvas-deep), var(--canvas)); }
.post__ghost{ height:11px; border-radius:999px; background:var(--canvas-deep); width:100%; }
.post__ghost--short{ width:62%; }
/* ---- the pilot page: a claim, the proof, three facts, one door --------------------- */
.lp__hero--pilot{ max-width:920px; padding-bottom:clamp(8px, 2vh, 20px); }
.lp__lede{ font-size:clamp(15.5px, 1.7vw, 18.5px); line-height:1.6; color:var(--ink-soft);
max-width:56ch; margin:0 auto; text-wrap:pretty; }
.lp__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
margin-top:clamp(24px, 4vh, 36px); }
.lp__actions .btn{ text-decoration:none; }
.lp__second{ background:var(--surface); border:1px solid var(--line-strong); color:var(--ink); }
.lp__second:hover{ background:var(--canvas-deep); }
/* the two pages, side by side: the whole argument of the product */
.lp__proof{ padding:clamp(48px, 9vh, 104px) var(--lp-gutter) clamp(20px, 4vh, 40px); }
/* as wide as the page allows: an A4 page shown small is legible as a shape but not as a
document, and the document IS the argument */
.sheets{ display:grid; gap:clamp(16px, 3vw, 36px); align-items:start;
grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); max-width:1120px; margin:0 auto; }
.sheets--single{ grid-template-columns:minmax(280px, 560px); justify-content:center;
margin-top:clamp(22px, 4vh, 40px); }
.sheet{ margin:0; }
.sheet img{ display:block; width:100%; height:auto; border-radius:var(--radius-sm);
border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-2); }
/* the generated page is the one being shown off: a blue lift, the navy of the buttons */
.sheet--out img{ box-shadow:0 2px 6px rgba(28,26,23,.08), 0 18px 50px rgba(30,42,56,.26);
border-color:var(--st-review); }
.sheet__cap{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
margin-top:12px; font-size:13.5px; color:var(--ink-soft); line-height:1.5; text-wrap:pretty; }
.sheet__tag{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
color:var(--ink-soft); background:var(--canvas-deep); border-radius:999px; padding:3px 10px; }
.sheet__tag--out{ color:var(--dark-ink); background:var(--dark); }
/* three facts, one line each */
/* the shelf, between the proof and the facts: one quiet line and the real chips */
.lp__types{ padding:clamp(24px, 5vh, 48px) var(--lp-gutter) clamp(8px, 2vh, 16px); text-align:center; }
.lp__types .lp__secsub{ margin:0 auto; max-width:60ch; }
.lp__types .doctypes{ margin-top:clamp(18px, 3vh, 26px); }
.lp__facts{ padding:clamp(30px, 6vh, 64px) var(--lp-gutter); }
.facts{ list-style:none; margin:0 auto; padding:0; max-width:900px; display:grid; gap:14px;
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
.fact{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.6;
color:var(--ink); text-wrap:pretty; }
.fact .ti{ font-size:19px; color:var(--accent-ink); flex-shrink:0; margin-top:1px; }
/* the tutorial's own page */
.lp__video-page{ max-width:1000px; }
.lp__video-page .lp__pagesub{ max-width:62ch; margin-bottom:clamp(22px, 4vh, 34px); }
.lp__video-page .lp__video{ width:100%; margin:0; border-radius:var(--radius-lg);
overflow:hidden; box-shadow:var(--shadow-2); aspect-ratio:1920/1112; }
.lp__video-page .lp__videonote{ text-align:left; max-width:72ch;
margin:clamp(20px, 3.5vh, 30px) 0 0; }
.lp__videocta{ margin-top:clamp(26px, 5vh, 44px); display:flex; flex-wrap:wrap; gap:14px;
align-items:center; justify-content:space-between; }
.lp__videocta .btn{ text-decoration:none; }
.lp__videocta .lp__secsub{ margin:0; }
/* ---- the landing's scrolling sections ------------------------------------------------
One container width and one gutter for every section, so nothing sits a few pixels off
its neighbour. Headings BALANCE their line breaks and paragraphs hold a readable measure
(~62 characters) — ragged, orphaned lines are what make a page look thrown together. */
.lp{ --lp-max:1120px; --lp-gutter:clamp(18px, 5vw, 40px); }
.lp__wrap{ width:100%; max-width:var(--lp-max); margin:0 auto; }
.lp__sec{ padding:clamp(56px, 10vh, 112px) var(--lp-gutter); }
.lp__sec--alt{ background:var(--canvas-deep); }
.lp__sechead{ max-width:38rem; margin:0 auto clamp(30px, 5vh, 52px); text-align:center; }
.lp__sectitle{ font-family:var(--font-display); font-weight:500; letter-spacing:-.02em;
color:var(--ink); font-size:clamp(27px, 3.3vw, 38px); line-height:1.14; margin:0 0 14px;
text-wrap:balance; }
.lp__secsub{ font-size:clamp(15px, 1.5vw, 17px); line-height:1.7; color:var(--ink-soft);
margin:0; max-width:62ch; text-wrap:pretty; }
.lp__sechead .lp__secsub{ margin-inline:auto; }
.lp__note{ text-align:center; margin:clamp(20px, 3vh, 30px) auto 0; max-width:54ch;
font-size:14.5px; line-height:1.65; color:var(--ink-soft); text-wrap:pretty; }
.lp__inline-cta{ align-self:flex-start; text-decoration:none; margin-top:22px; }
/* ---- image placeholders: what the picture WILL be, said out loud ---- */
.ph{ position:relative; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:10px; margin:0; padding:22px; text-align:center;
background:linear-gradient(160deg, var(--surface), var(--canvas-deep));
border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
box-shadow:var(--shadow-1); }
.ph::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
background-image:linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size:26px 26px; }
.ph--wide{ aspect-ratio:16/10; }
.ph--doc{ aspect-ratio:3/4; }
.ph--sq{ aspect-ratio:1/1; }
.ph--paper{ background:linear-gradient(160deg, var(--surface), var(--surface)); }
.ph__mark{ position:relative; z-index:1; width:42px; height:42px; border-radius:50%;
display:flex; align-items:center; justify-content:center; font-size:19px;
color:var(--accent-ink); background:var(--accent-bg); }
.ph__cap{ position:relative; z-index:1; font-size:12.5px; line-height:1.45;
color:var(--ink-faint); max-width:24ch; text-wrap:pretty; }
/* ---- three steps, staggered on wide screens ---- */
.steps3{ display:grid; gap:clamp(16px, 2.4vw, 26px);
grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); align-items:start; }
.step3{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
overflow:hidden; box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
.step3 .ph{ border:none; border-radius:0; border-bottom:1px solid var(--line); box-shadow:none; }
.step3__body{ padding:clamp(20px, 2.2vw, 26px); }
.step3__n{ font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--accent-ink);
width:30px; height:30px; display:flex; align-items:center; justify-content:center;
border-radius:50%; background:var(--accent-bg); margin-bottom:12px; }
.step3__t{ font-size:17.5px; font-weight:600; color:var(--ink); margin:0 0 8px; text-wrap:balance; }
.step3__p{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); margin:0; text-wrap:pretty; }
@media (min-width:860px){ /* a cascade, not three random offsets: 1 → 2 → 3 steps down */
.steps3 > :nth-child(2){ transform:translateY(34px); }
.steps3 > :nth-child(3){ transform:translateY(68px); }
.steps3{ padding-bottom:68px; } /* the cascade must not run into the next section */
}
/* ---- a fanned set of document shots ---- */
/* three columns at EVERY width: full-width portrait cards on a phone turn one composition
into three enormous empty blocks and a page nobody scrolls to the end of */
.fan{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(10px, 2.4vw, 26px);
align-items:start; max-width:840px; margin:0 auto; }
.fan .ph{ padding:clamp(10px, 2vw, 22px); }
.fan .ph__mark{ width:clamp(28px, 4vw, 42px); height:clamp(28px, 4vw, 42px);
font-size:clamp(14px, 2vw, 19px); }
.fan .ph__cap{ font-size:clamp(10px, 1.3vw, 12.5px); }
@media (min-width:760px){
.fan__item:nth-child(1){ transform:translateY(26px) rotate(-1.6deg); }
.fan__item:nth-child(3){ transform:translateY(14px) rotate(1.6deg); }
.fan__item:nth-child(2){ z-index:1; }
.fan__item:nth-child(2) .ph{ box-shadow:var(--shadow-2); }
}
/* ---- the document types we actually have ---- */
.doctypes{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; list-style:none;
padding:0; margin:clamp(34px, 6vh, 60px) auto 0; max-width:900px; }
.doctype{ background:var(--surface); border:1px solid var(--line-strong); border-radius:999px;
padding:9px 17px; font-size:14px; color:var(--ink); white-space:nowrap; }
@media (max-width:620px){ /* one chip per line reads as a list, not as a set */
.doctypes{ gap:7px; }
.doctype{ padding:7px 13px; font-size:12.5px; }
}
/* ---- a claim beside the picture of what it means, sides alternating ---- */
.lp__split{ display:grid; gap:clamp(28px, 5vw, 64px); align-items:center;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.lp__splitbody{ display:flex; flex-direction:column; }
.lp__split .lp__sectitle, .lp__split .lp__secsub{ text-align:left; }
@media (min-width:860px){ /* picture first on the alternating section */
.lp__split--rev .lp__splitbody{ order:2; }
.lp__split--rev .lp__splitart{ order:1; }
}
.lp__splitart{ display:flex; justify-content:center; width:100%; }
.lp__split--tight{ align-items:center; }
.ticks{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:11px; }
.ticks li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink);
line-height:1.55; text-wrap:pretty; }
.ticks .ti{ color:var(--accent-ink); font-size:17px; flex-shrink:0; margin-top:1px; }
/* ---- two shots, one overlapping the other ---- */
.stack{ position:relative; width:100%; max-width:440px; }
.stack__back{ width:82%; }
.stack__front{ position:absolute; right:0; bottom:-26px; width:52%; }
.stack__front .ph{ box-shadow:var(--shadow-2); }
.stack--wide{ max-width:520px; padding-bottom:18px; }
.stack--wide .stack__back{ width:100%; }
.stack__front--chip{ width:34%; right:-10px; bottom:-30px; }
@media (max-width:680px){ /* no overlap on a phone: stacked, both readable */
.stack{ display:flex; flex-direction:column; gap:14px; padding-bottom:0; }
.stack__back, .stack__front{ position:static; width:100%; }
.stack__front--chip{ width:60%; align-self:flex-end; }
}
/* ---- three quiet cards ---- */
.cards3{ display:grid; gap:clamp(14px, 2vw, 20px);
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
.card3{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
padding:clamp(20px, 2.2vw, 28px); }
.card3 > .ti{ font-size:22px; color:var(--accent-ink); }
.card3__t{ font-size:16.5px; font-weight:600; color:var(--ink); margin:12px 0 7px; text-wrap:balance; }
.card3__p{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); margin:0; text-wrap:pretty; }
/* ---- the closing ask ---- */
/* the closing ask is the page's FOOT: inverted, in the app's own navy, running straight
into the legal strip below it (lp_foot(dark=true)) so the page ends on one dark block
instead of a band with a light sliver under it. Muted text on navy follows the sidebar's
own convention (rgba of --dark-ink), and the tokens flip with the dark theme. */
.lp__end{ text-align:center; padding:clamp(64px, 11vh, 120px) var(--lp-gutter);
background:var(--dark); color:var(--dark-ink); }
.lp__end .lp__sectitle{ max-width:20ch; margin-inline:auto; color:var(--dark-ink); }
.lp__end .lp__secsub{ max-width:52ch; margin:0 auto 26px; color:rgba(239,234,227,.72); }
.lp__end .btn{ text-decoration:none; }
/* the navy pill would disappear on navy: invert it — light pill, navy label */
.lp__end .btn--primary{ background:var(--dark-ink); color:var(--dark); }
.lp__end .btn--primary:hover{ background:var(--surface); }
.lp__formwrap{ max-width:640px; margin:clamp(34px, 6vw, 62px) auto 0; padding:0 24px; }
.lp__back{ font-size:12.5px; color:var(--ink-faint); text-decoration:none; display:inline-block; margin-bottom:14px; }
.lp__back:hover{ color:var(--ink-soft); }
.lp__form, .lp__thanks{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
padding:clamp(26px, 4vw, 38px); box-shadow:var(--shadow-2); }
.lp__thanks{ text-align:center; }
.lp__thanksmark{ font-size:34px; color:var(--positive); line-height:1; margin-bottom:10px; }
.lp__thanks p{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0 0 20px; }
.lp__formh{ font-family:var(--font-display); font-weight:500; font-size:26px; color:var(--ink); margin:0 0 6px; }
.lp__formsub{ font-size:13.5px; color:var(--ink-soft); margin:0 0 20px; line-height:1.55; }
.lp__fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lp__field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.lp__field--wide, .lp__submit{ grid-column:1 / -1; }
.lp__field > span{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.lp__field > span b{ color:var(--accent-ink); }
.lp__field > span small{ text-transform:none; letter-spacing:0; font-size:11px; }
.lp__field textarea.login__input{ height:auto; padding-top:11px; resize:vertical; font:inherit; font-size:14px; }
.lp__submit{ justify-self:start; }
/* NOT flex: the gap would fall between the link and its full stop */
.lp__privacy{ font-size:12px; color:var(--ink-faint); margin:16px 0 0; line-height:1.5; }
.lp__privacy i{ vertical-align:-2px; margin-right:4px; }
.lp__privacy a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
.lp__foot{ margin-top:auto; flex-shrink:0;
padding:clamp(18px, 3vh, 30px) clamp(20px, 5vw, 56px) clamp(16px, 2.5vh, 26px);
display:flex; gap:20px; align-items:center; flex-wrap:wrap;
font-size:12.5px; color:var(--ink-faint); }
.lp__foot a{ color:var(--ink-faint); text-decoration:none; }
.lp__foot a:hover{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
/* continues the navy band above it — one foot, with a hairline telling the ask from the
legal line. Only where the page actually ends on .lp__end; every other page keeps the
light strip. */
.lp__foot--dark{ background:var(--dark); color:rgba(239,234,227,.55);
border-top:1px solid rgba(239,234,227,.12); }
.lp__foot--dark a{ color:rgba(239,234,227,.55); }
.lp__foot--dark a:hover{ color:var(--dark-ink); }
@media (max-width:860px){
/* let the headline find its own breaks once the line is short */
.lp__br{ display:none; }
}
@media (max-width:560px){
.lp__fields{ grid-template-columns:1fr; }
.lp__submit{ justify-self:stretch; }
}
/* ---- suscripción v2 (subscription build): 4 cards + interval toggle + state panel ---- */
/* double class so these beat the generic .plans rule in the late responsive block */
.plans.plans--four{ grid-template-columns:repeat(4, 1fr); max-width:none; margin-top:18px; }
@media (max-width:1180px){ .plans.plans--four{ grid-template-columns:1fr 1fr; max-width:none; } }
@media (max-width:560px){ .plans.plans--four{ grid-template-columns:1fr; } }
.plan__iva{ font-size:11px; color:var(--ink-faint); margin:-14px 0 16px; }
.plan--featured .plan__iva{ color:rgba(239,234,227,.55); }
/* one price pair rendered, the other hidden — the grid's data-interval decides */
.plans .plan__price-year{ display:none; }
.plans[data-interval="year"] .plan__price-year{ display:inline; }
.plans[data-interval="year"] .plan__price-month{ display:none; }
.plan__value{ font-size:12.5px; color:var(--accent-ink); font-weight:500; margin:2px 0 16px; line-height:1.45; }
.plan--featured .plan__value{ color:var(--accent); }
.plan__current-tag{ position:absolute; top:-12px; right:20px; background:var(--positive-bg, var(--surface));
color:var(--positive); border:1px solid var(--positive); font-size:10.5px; font-weight:600;
letter-spacing:.05em; text-transform:uppercase; padding:3px 11px; border-radius:999px; }
.plan--custom .plan__custom-sub{ font-size:13px; color:var(--ink-soft); margin:6px 0 18px; line-height:1.5; }
.plan form{ margin-top:6px; }
.plan .btn[disabled]{ opacity:.5; cursor:default; }
.subs-toggle{ display:inline-flex; gap:4px; background:var(--surface); border:1px solid var(--line);
border-radius:999px; padding:4px; margin:10px 0 4px; box-shadow:var(--shadow-1); }
.subs-toggle__opt{ border:0; background:none; font:inherit; font-size:13px; color:var(--ink-soft);
padding:7px 16px; border-radius:999px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.subs-toggle__opt.is-on{ background:var(--dark); color:var(--dark-ink); }
.subs-toggle__badge{ font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
background:var(--accent); color:#241206; border-radius:999px; padding:2px 8px; }
.subs-state{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
box-shadow:var(--shadow-1); padding:22px 24px; margin:14px 0 26px; }
.subs-state__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.subs-state__plan{ font-family:var(--font-display); font-size:22px; color:var(--ink); }
.subs-state__meta{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.subs-meters{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:18px; margin-top:18px; }
.subs-meter__label{ font-size:11.5px; letter-spacing:.03em; color:var(--ink-faint); }
.subs-meter__nums{ font-size:15px; color:var(--ink-soft); margin:3px 0 7px; }
.subs-meter__nums b{ font-family:var(--font-display); font-size:20px; color:var(--ink); font-weight:500; }
.subs-meter__bar{ height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
.subs-meter__bar span{ display:block; height:100%; border-radius:999px; background:var(--positive); max-width:100%; }
.subs-meter__bar span.is-warn{ background:var(--accent); }
.subs-split{ margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.subs-split__rows{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.subs-split__chip{ font-size:12px; color:var(--ink-soft); background:var(--canvas); border:1px solid var(--line);
border-radius:999px; padding:4px 12px; }
.banner--warn{ border-color:var(--amber, var(--accent)); }
.banner--warn i{ color:var(--amber, var(--accent)); }
.tsaved{ margin:2px 0 18px; }
.tsaved__row{ display:flex; align-items:center; gap:24px; padding:14px 18px; background:var(--surface); border:1px solid var(--line);
border-radius:var(--radius-md); box-shadow:var(--shadow-1); flex-wrap:wrap; }
.tsaved__label{ font-size:12px; color:var(--ink-soft); overflow-wrap:anywhere; }
.tsaved__cell{ min-width:0; border-left:1px solid var(--line); padding-left:24px; }
.tsaved__est{ color:var(--ink-faint); }
.tsaved__big{ font-family:var(--font-display); font-size:24px; font-weight:500; color:var(--accent-ink); display:flex; align-items:center; gap:7px; }
.tsaved__big i{ font-size:17px; }
.tsaved__num{ font-size:15px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.tsaved__foot{ font-size:11.5px; color:var(--ink-faint); margin-top:7px; }
@media (max-width:520px){ .tsaved__cell{ border-left:0; padding-left:0; } }
.cal-head{ display:flex; align-items:center; gap:16px; margin-bottom:10px; }
/* the tool's FULL-COLOUR mark, same recipe as the rail tile (.md-item__tile): the family
colour fills the chip and the glyph sits on it in the warm off-white. It was a grey
glyph on a grey chip, so the tool you were configuring had no identity on this page. */
.cal-head__chip{ width:56px; height:56px; flex-shrink:0; border-radius:18px;
background:var(--fam-ink, var(--dark)); color:#FFF9F2;
display:flex; align-items:center; justify-content:center; }
.cal-head__chip svg{ width:28px; height:28px; }
.cal-head__tool{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:500; color:var(--ink-faint); margin-bottom:2px; }
.cal-head .page-title{ margin:0; }
.cal-req{ font-size:13.5px; color:var(--st-pending-ink); margin:10px 0 0; }
.cal-req--ok{ color:var(--st-ready-ink); }
.cal-form{ display:flex; flex-direction:column; align-items:stretch; gap:16px; margin-top:6px; }
.cal-form > *{ margin:0; }
.cal-actions{ margin-top:4px; }
/* PHONE: the button sat under the dropzone + tips + the regulated notice + the privacy
line, so on a 375px screen you had to scroll to find out how to continue. Pin it to the
bottom instead — it stays visible (disabled, with the reason) from the moment you land,
so "what do I do next" is answered without scrolling. */
@media (max-width:640px){
.cal-actions{ position:sticky; bottom:0; z-index:20; margin-top:0;
padding:12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
background:var(--canvas); box-shadow:0 -10px 18px -10px rgba(28,26,23,.22); }
.cal-actions .btn{ width:100%; justify-content:center; }
.cal-actions__row{ flex-direction:column; align-items:stretch; }
.cal-req{ text-align:center; margin-top:8px; }
}
:root[data-theme="dark"] .cal-actions{ background:var(--canvas); }
.cal-tips{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-1); padding:16px 20px; margin:18px 0; }
.cal-tips__title{ display:flex; align-items:center; gap:7px; font-weight:500; font-size:13.5px; color:var(--ink); margin-bottom:8px; }
.cal-tips__title i{ font-size:16px; color:var(--accent); }
.cal-tips__list{ margin:0; padding-left:18px; }
.cal-tips__list li{ font-size:13px; color:var(--ink-soft); line-height:1.55; margin-bottom:4px; }
.cal-tips__list strong{ color:var(--ink); font-weight:500; }
/* ---------------------------------------------------------------
13 · ART — mascot + brand arrow + tool glyph containers
--------------------------------------------------------------- */
.tool-art svg{ width:100%; height:100%; display:block; }
.tool-art .a{ fill:none; stroke:var(--ink-soft); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.tool-art .b{ fill:none; stroke:var(--ink-faint); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.tool-art .f{ fill:var(--canvas-deep); }
.tool-art .p{ fill:var(--surface); }
.tool-art .acc{ fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.tool-art .af{ fill:var(--accent); stroke:none; }
.logo-mark{ position:relative; display:flex; align-items:center; justify-content:center; }
.brand-arrow{ display:inline-block; width:1.1em; height:.6em; vertical-align:-.03em; }
.brand-arrow path{ fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.drafty{ width:96px; }
.drafty svg{ width:100%; height:auto; display:block; overflow:visible; }
.drafty .a{ fill:none; stroke:var(--ink-soft); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.drafty .b{ fill:none; stroke:var(--ink-faint); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.drafty .f{ fill:var(--canvas-deep); }
.drafty .p{ fill:var(--surface); }
.drafty .acc{ fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.drafty .af{ fill:var(--accent); stroke:none; }
.drafty .j{ fill:var(--ink-soft); stroke:none; }
.drafty .a.p, .drafty .b.p{ fill:var(--surface); }
@media (prefers-reduced-motion: no-preference){
.drafty--empty .d-figure, .drafty--offering .d-figure{ animation:drafty-bob 4.5s ease-in-out infinite; }
.drafty--empty .d-shadow, .drafty--offering .d-shadow{ animation:drafty-shadow 4.5s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.drafty--empty .d-eyes, .drafty--offering .d-eyes{ animation:drafty-blink 5.2s infinite; transform-origin:center; transform-box:fill-box; }
.drafty--empty .d-tip, .drafty--offering .d-tip{ animation:drafty-glow 3.8s ease-in-out infinite; }
.drafty--offering .d-blueprint{ animation:drafty-offer 4s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes drafty-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2.5px); } }
@keyframes drafty-shadow{ 0%,100%{ transform:scaleX(1); opacity:1; } 50%{ transform:scaleX(.94); opacity:.75; } }
@keyframes drafty-blink{ 0%,93.5%,100%{ transform:scaleY(1); } 96.5%{ transform:scaleY(.12); } }
@keyframes drafty-glow{ 0%,100%{ filter:none; } 50%{ filter:drop-shadow(0 0 2.5px var(--accent)); } }
@keyframes drafty-offer{ 0%,100%{ transform:rotate(-1.2deg); } 50%{ transform:rotate(1.2deg); } }
}
/* legacy tool-card leftovers (kept harmless) */
.grid-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.tool-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
box-shadow:var(--shadow-1); padding:22px; display:block; transition:transform .2s ease, box-shadow .2s ease; }
.tool-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.tool-card__icon{ width:46px; height:46px; border-radius:14px; background:var(--canvas-deep); color:var(--ink-soft);
display:flex; align-items:center; justify-content:center; font-size:23px; }
.tool-card__name{ font-size:17px; font-weight:500; color:var(--ink); margin-top:15px; line-height:1.25; }
.tool-card__desc{ font-size:13.5px; color:var(--ink-soft); margin:5px 0 16px; line-height:1.5; }
.tool-card__open{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.tool-card .badge{ position:relative; z-index:2; }
.tool-card__resume{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
color:var(--accent-ink); background:var(--accent-bg); border-radius:999px; padding:7px 13px; margin-bottom:11px; }
.tool-card__resume:hover{ background:var(--accent-soft); }
.tool-card--resume{ border-color:var(--accent-soft); }
.tool-card__newlink{ position:relative; z-index:2; display:inline-block; margin-top:11px; font-size:12px; color:var(--ink-soft);
text-decoration:underline; text-underline-offset:2px; }
.tool-card__newlink:hover{ color:var(--ink); }
/* ---------------------------------------------------------------
14 · ADMIN CONSOLE — functional & dense, re-tokened (not redesigned)
--------------------------------------------------------------- */
.admin{ min-height:100vh; background:var(--canvas); }
.admin__bar{ display:flex; align-items:center; gap:16px; padding:12px 24px; border-bottom:1px solid var(--line); background:var(--canvas-deep); }
.admin__brand{ font-family:var(--font-display); font-size:17px; color:var(--ink); }
.admin__brand small{ font-family:var(--font-ui); font-size:12px; color:var(--ink-faint); margin-left:6px; }
.admin__spacer{ margin-left:auto; }
.admin__chip{ font-size:11px; color:var(--ink-faint); border:1px solid var(--line-strong); border-radius:999px; padding:3px 10px; }
.admin__main{ max-width:1100px; margin:0 auto; padding:26px 24px 60px; }
.admin h1{ font-family:var(--font-display); font-weight:500; font-size:22px; margin:0 0 4px; }
.admin h2{ font-size:14px; font-weight:600; color:var(--ink); margin:24px 0 10px; }
.admin .muted{ color:var(--ink-faint); font-size:12.5px; }
.admin a.link{ color:var(--accent-ink); }
.admin .btn{ height:36px; padding:0 16px; font-size:13px; }
.admin__back{ font-size:12.5px; color:var(--ink-faint); margin-bottom:10px; display:inline-block; }
.acard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; margin-bottom:14px; }
.atable{ width:100%; border-collapse:collapse; font-size:12.5px; }
.atable th{ text-align:left; color:var(--ink-faint); font-weight:500; padding:7px 10px; border-bottom:1px solid var(--line-strong); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.atable td{ padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.atable tr:last-child td{ border-bottom:0; }
.pill{ font-size:11px; padding:2px 9px; border-radius:999px; border:1px solid var(--line-strong); color:var(--ink-faint); }
.pill--draft{ background:var(--canvas-deep); color:var(--ink-soft); }
.pill--published{ background:var(--positive-bg); color:var(--st-ready-ink); border-color:transparent; }
.pill--reg{ background:var(--amber-bg-soft); color:var(--st-pending-ink); border-color:var(--amber-line); }
.pill--uncert{ background:var(--st-pending-bg); color:var(--st-pending-ink); border-color:var(--amber-line); }
.pill--certified{ background:var(--positive-bg); color:var(--st-ready-ink); border-color:transparent; }
.steps{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 18px; }
.step{ flex:1; min-width:130px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface); }
.step--done{ border-color:var(--positive-bg); background:var(--positive-bg); }
.step--active{ border-color:var(--ink); }
.step__n{ font-size:10px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
.step__t{ font-size:13px; color:var(--ink); margin-top:2px; }
.step--done .step__t{ color:var(--st-ready-ink); }
.afield{ margin-bottom:12px; }
.afield label{ display:block; font-size:12px; color:var(--ink-faint); margin-bottom:4px; }
.ainput, .aselect, .atextarea{ width:100%; font-size:13px; padding:8px 10px; border-radius:8px; }
.atextarea{ min-height:60px; resize:vertical; }
.arow{ display:flex; gap:12px; flex-wrap:wrap; }
.arow > *{ flex:1; min-width:160px; }
.ainline{ display:flex; gap:8px; align-items:center; }
.acheck{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink); }
.tune-row td{ padding:10px; }
.tune-row{ border-bottom:1px solid var(--line); }
.tune-name{ font-size:12px; color:var(--ink); font-weight:500; }
.tune-meta{ font-size:11px; color:var(--ink-faint); }
.tune-obs{ font-size:11px; color:var(--st-ready-ink); }
.tune-input{ width:100%; font-size:12px; padding:6px 8px; border-radius:6px; }
.tune-input--sm{ width:88px; }
.typebadge{ font-size:10px; padding:1px 7px; border-radius:6px; background:var(--canvas-deep); color:var(--ink-soft); }
.sticky-actions{ position:sticky; bottom:0; background:var(--canvas); border-top:1px solid var(--line-strong); padding:12px 0; margin-top:18px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.admin__nav{ font-size:13px; color:var(--ink-faint); padding:4px 6px; }
.admin__nav:hover{ color:var(--ink); }
.admin__nav--soon{ color:var(--ink-faint); cursor:default; }
.admin__soon{ font-size:9px; text-transform:uppercase; letter-spacing:.05em; background:var(--canvas-deep); color:var(--ink-faint); border-radius:10px; padding:1px 6px; margin-left:3px; }
.admin__count{ background:var(--accent); color:#241206; font-size:10px; border-radius:10px; padding:1px 7px; margin-left:3px; }
.chips{ display:flex; gap:7px; flex-wrap:wrap; margin:0 0 14px; }
.chip{ font-size:12px; padding:5px 12px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-faint); cursor:pointer; }
.chip--on{ background:var(--dark); color:var(--dark-ink); border-color:var(--dark); }
.owner-tag{ font-size:11px; color:var(--st-ready-ink); }
.fam-tag{ font-size:11px; color:var(--ink-faint); background:var(--canvas-deep); border-radius:6px; padding:1px 7px; }
.inbox-item{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--st-pending); border-radius:10px; padding:16px 18px; margin-bottom:12px; }
.inbox-item__head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.inbox-delta{ font-size:12px; color:var(--ink-faint); margin:3px 0; }
.inbox-delta b{ color:var(--ink); font-weight:500; }
.inbox-delta--warn{ color:var(--family-actas-ink); background:var(--accent-bg); border-radius:7px; padding:7px 10px; }
.inbox-delta--dim{ color:var(--ink-faint); }
.sev{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.sev--high{ background:var(--family-actas-stroke); }
.sev--check{ background:var(--st-pending); }
.sev--clean{ background:var(--family-certificados-stroke); }
.attn{ border-left:3px solid var(--line-3); }
.attn--clear{ border-left-color:var(--family-certificados-stroke); }
.attn__head{ display:flex; align-items:center; gap:10px; }
.attn__title{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink); }
.attn__count{ background:var(--st-pending); color:#fff; border-radius:999px; font-size:11px; font-weight:600; padding:2px 9px; }
.attn__zero{ display:flex; align-items:center; gap:7px; color:var(--family-certificados-ink); font-size:13px; margin-left:auto; }
.attn__row{ display:flex; gap:12px; padding:13px 0 11px; border-top:1px solid var(--line); margin-top:0; }
.attn__head + .attn__row{ margin-top:12px; }
.attn__row .sev{ margin-top:5px; }
.attn__body{ flex:1; min-width:0; }
.attn__what{ font-size:14px; font-weight:500; color:var(--ink); }
.attn__meta{ font-weight:400; color:var(--ink-faint); font-size:12.5px; }
.attn__why{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; line-height:1.45; max-width:560px; }
.attn__why--high{ color:var(--family-actas-ink); }
.attn__act{ display:flex; gap:8px; align-items:center; flex-shrink:0; }
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; }
.stat{ margin-bottom:14px; display:flex; flex-direction:column; }
.stat__label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); }
.stat__value{ font-size:26px; font-family:var(--font-display); color:var(--ink); line-height:1.2; margin:2px 0 6px; }
.stat__spark{ margin-top:auto; display:block; }
.stat__foot{ font-size:12px; color:var(--ink-faint); line-height:1.45; margin-top:auto; }
.chart__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.chart__head h2{ margin:0; }
.chart{ display:flex; align-items:flex-end; gap:2px; height:120px; padding-top:20px; margin-top:8px; box-sizing:content-box; }
.chart__slot{ flex:1 1 0; max-width:24px; height:100%; display:flex; align-items:flex-end; }
.chart__bar{ width:100%; background:var(--accent); border-radius:4px 4px 0 0; position:relative; min-height:3px; }
.chart__bar--zero{ background:var(--line-strong); height:2px !important; min-height:2px; border-radius:0; }
.chart__peak{ position:absolute; top:-17px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--ink-soft); }
.chart__x{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-faint); margin-top:6px; }
.dash-cols{ display:grid; grid-template-columns:3fr 2fr; gap:14px; align-items:start; }
.tbl-flag{ font-size:10.5px; background:var(--st-pending-bg); color:var(--st-pending-ink); border-radius:10px; padding:1px 7px; margin-left:5px; white-space:nowrap; }
.feed{ list-style:none; margin:0; padding:0; }
.feed__item{ display:flex; gap:9px; align-items:baseline; padding:8px 0; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-soft); line-height:1.45; }
.feed__item:first-child{ border-top:0; padding-top:2px; }
.feed__ico{ color:var(--ink-faint); flex-shrink:0; transform:translateY(1.5px); }
.feed__text{ flex:1; min-width:0; }
.feed__text b{ color:var(--ink); font-weight:500; }
.feed__ago{ color:var(--ink-faint); font-size:11.5px; white-space:nowrap; }
.dash-foot{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px; font-size:12.5px; color:var(--ink-faint); }
.dash-foot__links{ display:flex; gap:18px; flex-wrap:wrap; }
.dash-foot__links a{ color:var(--accent-ink); }
.dash-foot__links a:hover{ color:var(--ink); }
.livedot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--line-3); margin-right:6px; }
.livedot--on{ background:var(--family-certificados-stroke); }
.name-field{ display:flex; align-items:center; gap:14px; padding:10px 0; border-top:1px solid var(--line); }
.name-field:first-of-type{ border-top:0; }
.name-field__ex{ flex:1; font-size:13px; color:var(--ink-soft); min-width:0; }
.name-field__ex code{ background:var(--canvas-deep); border-radius:5px; padding:1px 6px; font-size:12px; color:var(--ink); }
.name-field input{ flex:0 0 280px; padding:8px 11px; }
@media (max-width:900px){
.dash-cols{ grid-template-columns:1fr; }
.attn__row{ flex-wrap:wrap; }
.attn__act{ margin-left:22px; }
}
/* ---------------------------------------------------------------
15 · RESPONSIVE SHELL
--------------------------------------------------------------- */
@media (max-width:1180px){
.main{ padding:44px 36px 56px; }
}
@media (max-width:1024px){
.sidebar{ width:232px; padding:24px 12px 16px; }
.main{ padding:40px 30px 52px; }
}
@media (max-width:880px){
.shell{ flex-direction:column; min-height:100vh; height:auto; overflow:visible; }
.main{ overflow-y:visible; }
/* the bar STAYS: as a normal-flow row it scrolled away with the page, so reaching the
menu from halfway down a long list meant scrolling all the way back to the top.
Sticky keeps it in flow (nothing is overlapped on load) but pinned once you scroll.
z-index:100 puts it over the page; the burger/drawer/scrim are its own descendants,
so their 110/120/130 order still holds inside it. */
.sidebar{ width:auto; flex-direction:row; align-items:center; gap:10px; border-bottom:0; padding:10px 16px;
position:sticky; top:0; z-index:100; }
.brand{ padding:0 6px 0 2px; font-size:21px; flex-shrink:0; }
/* the rail is a top BAR here: the wordmark+bell row loses its column padding */
.brandrow{ padding:0; gap:2px; flex:1; min-width:0; }
.avisos__btn{ width:40px; height:40px; font-size:19px; }
/* The bell sits at the right edge, so a popover anchored to it runs off the screen.
Pin it to the VIEWPORT instead — full width minus a gutter, and capped so a long
list scrolls inside itself rather than past the bottom of the page. */
.avisos{ position:static; }
.avisos__menu{ position:fixed; top:60px; left:12px; right:12px; width:auto;
max-height:calc(100vh - 84px); overflow-y:auto; overscroll-behavior:contain; z-index:130; }
.avisos__item{ padding:12px 10px; }
.avisos__text{ font-size:14px; }
/* ---- the bar carries the burger, the wordmark and the bell. NOTHING else: the nav
used to be a horizontal scroller here, which hid items off-screen with no hint that
they existed. Everything now lives in one drawer behind the burger. ---- */
/* the burger stays above the open drawer (it becomes the × that closes it), so the
drawer starts below the bar rather than burying its own close control */
.navburger{ display:flex; position:relative; z-index:130; }
.sidebar__drawer{ display:flex; flex-direction:column; position:fixed; z-index:120;
top:0; left:0; bottom:0; width:min(290px, 84vw); padding:70px 14px 22px;
background:var(--dark); color:var(--dark-ink); overflow-y:auto; overscroll-behavior:contain;
transform:translateX(-101%); visibility:hidden;
transition:transform .26s cubic-bezier(.32,.72,0,1), visibility .26s;
box-shadow:8px 0 32px rgba(0,0,0,.28); }
.sidebar.is-open .sidebar__drawer{ transform:none; visibility:visible; }
.sidebar__scrim{ display:block; position:fixed; inset:0; z-index:110; background:rgba(10,12,16,.5);
opacity:0; transition:opacity .26s ease; }
.sidebar.is-open .sidebar__scrim{ opacity:1; }
.sidebar__scrim[hidden]{ display:none; }
.nav{ flex-direction:column; gap:2px; }
.nav__item{ height:46px; padding:0 14px; font-size:15px; }
.nav__sub{ display:none; }
.nav__spacer{ display:block; flex:1; }
/* inside the drawer the account is a plain section, not a popover — one less tap, and
no menu that opens over itself in a panel that is already a menu */
.account{ border-top:1px solid rgba(255,255,255,.12); padding-top:12px; margin:12px 0 0; }
.account__trigger{ pointer-events:none; width:100%; }
.account__chev{ display:none; }
.account__menu, .account__menu[hidden]{ display:block; position:static; margin-top:6px;
min-width:0; width:100%; background:transparent; border:0; box-shadow:none; padding:0; }
/* the menu's own colours assume the light popover it normally sits in — on the dark
drawer they read as barely-there grey, so restate them against this background */
.account__mi{ height:46px; font-size:15px; color:var(--dark-ink); }
.account__mi i{ color:rgba(239,234,227,.72); font-size:19px; }
.account__mi:hover, .account__mi:active{ background:rgba(255,255,255,.08); }
.account__mi--on{ background:rgba(255,255,255,.14); }
.account__mi--on, .account__mi--on i{ color:var(--dark-ink); }
.account__sep{ background:rgba(255,255,255,.14); }
.account__name{ color:var(--dark-ink); }
.account__meta{ color:rgba(239,234,227,.7); }
/* the drawer has room for the workspace name — the bar-avatar-only rule below is for
the bar, which no longer carries the account at all */
.sidebar__drawer .account__id{ display:block; min-width:0; }
.sidebar__drawer .account__name, .sidebar__drawer .account__meta{
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* iOS Safari zooms the whole page in when a focused field's text is under 16px, and it
does NOT zoom back out afterwards. Every typable control gets 16px on small screens —
this is the one place a font size is a behaviour, not a style.
The :not() parts are load-bearing for SPECIFICITY as well as for excluding controls:
an attribute selector counts like a class, so these outrank the per-field font sizes
set further down the sheet (.login__input, .fb-text, .doc-sort …). */
input:not([type=checkbox]):not([type=radio]):not([type=file]),
textarea:not([hidden]), select:not([hidden]){ font-size:16px; }
.main{ padding:30px 22px; }
.main__inner{ max-width:680px; }
.cat-head{ flex-direction:column; align-items:flex-start; }
.cat-head__aside{ flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; }
.toolbar{ padding:13px 16px 8px; }
.rail{ padding:14px 12px 6px; }
.rail__step{ width:auto; flex:0 1 auto; gap:5px; }
.rail__label{ font-size:11px; }
.rail__line{ margin-top:13px; }
.stage{ padding:16px 18px 22px; }
.footer{ padding:12px 16px; }
.result{ padding:24px 18px; }
.result__inner{ flex-direction:column-reverse; gap:24px; text-align:center; }
.result__main{ flex:none; }
.result__more{ align-items:center; }
.result-card__actions{ flex-direction:column; }
.plans{ grid-template-columns:1fr; max-width:420px; }
.grid-cards{ grid-template-columns:1fr; }
.detail-head > div:last-child{ margin-left:10px; margin-right:10px; }
}
@media (max-width:520px){
.account__id, .account__chev{ display:none; }
.brand{ font-size:19px; }
.main{ padding:24px 16px; }
/* a 180px label beside a field leaves no room for the field itself — stack them */
.set-field{ flex-direction:column; align-items:stretch; gap:6px; }
.set-field__label{ width:auto; }
.page-sub{ margin-bottom:28px; }
.rail__label{ display:none; }
.toolbar__title{ font-size:16px; max-width:60vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wfoot{ padding:6px 10px 10px; }
.cat-grid{ gap:16px; }
.cat-tile__art{ height:150px; }
}
/* ---------------------------------------------------------------
16 · DARK-THEME SURFACE FIXES
--------------------------------------------------------------- */
:root[data-theme="dark"] ::-webkit-scrollbar{ width:12px; height:12px; }
:root[data-theme="dark"] ::-webkit-scrollbar-track{ background:transparent; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#333C48; border-radius:7px; border:3px solid transparent; background-clip:padding-box; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background:#414D5D; }
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select{ background-color:var(--surface); color:var(--ink); border-color:var(--line-strong); }
:root[data-theme="dark"] .doc-search input, :root[data-theme="dark"] .cap-transcript{ background:transparent; }
:root[data-theme="dark"] .nav__item--active{ background:var(--canvas); color:var(--ink); }
:root[data-theme="dark"] .nav__item--active i{ color:var(--ink); }
:root[data-theme="dark"] .md-item--on{ background:var(--canvas-deep); color:var(--ink); }
:root[data-theme="dark"] .md-item--on .md-item__tile{ background:rgba(255,255,255,.06); color:var(--ink); }
:root[data-theme="dark"] .btn--primary{ background:var(--dark-ink); color:#1C1A17; }
:root[data-theme="dark"] .btn--primary:hover{ background:#fffdf8; }
:root[data-theme="dark"] .btn--primary.btn--disabled, :root[data-theme="dark"] .btn--primary[disabled]{ background:var(--dark-ink); color:#1C1A17; opacity:.35; }
:root[data-theme="dark"] .filter-chip--on, :root[data-theme="dark"] .signer-opt--on, :root[data-theme="dark"] .chip--on, :root[data-theme="dark"] .theme-opt--on{ background:var(--dark-ink); color:#1C1A17; border-color:var(--dark-ink); }
:root[data-theme="dark"] .rail__dot--done{ background:var(--dark-ink); color:#1C1A17; }
:root[data-theme="dark"] [data-tip]:hover::after, :root[data-theme="dark"] [data-tip]:focus-visible::after{ background:#3A362F; color:var(--ink); }
:root[data-theme="dark"] [data-tip]:hover::before, :root[data-theme="dark"] [data-tip]:focus-visible::before{ border-bottom-color:#3A362F; }
:root[data-theme="dark"] .cap__rec{ background:var(--dark-ink); color:#1C1A17; }
:root[data-theme="dark"] .cap__rec--on{ background:var(--accent); color:#241206; }
:root[data-theme="dark"] .cap__fallback-up{ background:var(--dark-ink); color:#1C1A17; }
:root[data-theme="dark"] .upload-thumb__ord{ background:rgba(236,231,223,.85); color:#1C1A17; }
:root[data-theme="dark"] .plan--featured{ background:var(--canvas-deep); border-color:var(--line-strong); }
:root[data-theme="dark"] .badge--popular{ color:#241206; }
:root[data-theme="dark"] .attn__count{ color:#1C1A17; }
:root[data-theme="dark"] .leave, :root[data-theme="dark"] .onb{ background:rgba(0,0,0,.55); }
:root[data-theme="dark"] .skel::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
:root[data-theme="dark"] .app--tool{
--float:0 1px 2px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.4), 0 28px 56px rgba(0,0,0,.3);
--float-dark:0 2px 4px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.55); }
:root[data-theme="dark"] .cap-tool, :root[data-theme="dark"] .dropzone__icon{
background:var(--canvas-deep); box-shadow:0 1px 2px rgba(0,0,0,.35), 0 5px 12px rgba(0,0,0,.4); }
/* ---------------------------------------------------------------
17 · INICIO — the client dashboard (important info only)
--------------------------------------------------------------- */
.home-hero{ position:relative; margin-top:4px; }
.home-hero__photo{ height:clamp(240px, 30vw, 360px); border-radius:var(--radius-xl); border:1px solid var(--line);
background-color:var(--canvas-deep); background-image:url('/static/img/actas.webp');
background-size:cover; background-position:center 35%; position:relative; overflow:hidden; }
.home-hero__photo::after{ content:""; position:absolute; inset:0; background:var(--canvas); opacity:.08; mix-blend-mode:multiply; }
:root[data-theme="dark"] .home-hero__photo::after{ background:#000; opacity:.22; mix-blend-mode:normal; }
.home-hero__panel{ position:relative; z-index:2; margin:-84px 0 0 clamp(16px, 4vw, 40px); max-width:min(520px, calc(100% - 32px));
background:var(--surface-glass); -webkit-backdrop-filter:var(--blur-glass); backdrop-filter:var(--blur-glass);
border:1px solid var(--glass-edge); border-radius:var(--radius-lg); box-shadow:var(--shadow-2); padding:26px 30px 24px; }
.home-hero__panel .page-title{ font-size:clamp(28px, 3.2vw, 42px); }
.home-hero__panel .page-sub{ margin:8px 0 0; font-size:14.5px; }
/* stat band: bento chips crossing under the hero; exactly one inverted (navy) card */
.home-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:16px; margin:24px 0 0; }
.stat-chip{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
box-shadow:var(--shadow-1); padding:18px 20px 16px; display:flex; flex-direction:column; gap:2px; }
.stat-chip__label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--ink-faint); }
.stat-chip__num{ font-family:var(--font-display); font-size:clamp(28px, 2.6vw, 38px); font-weight:500; line-height:1.1;
color:var(--ink); font-variant-numeric:tabular-nums; }
.stat-chip__num small{ font-family:var(--font-ui); font-size:13px; font-weight:400; color:var(--ink-faint); margin-left:4px; }
.stat-chip--dark{ background:var(--dark); border-color:var(--dark); color:var(--dark-ink); }
.stat-chip--dark .stat-chip__label{ color:rgba(239,234,227,.55); }
.stat-chip--dark .stat-chip__num{ color:var(--dark-ink); }
.stat-chip--accent .stat-chip__num{ color:var(--accent-ink); }
/* below the fold: asymmetric 7/5 — recents left, actions rail right */
.home-grid{ display:grid; grid-template-columns:7fr 5fr; gap:24px; align-items:start; margin-top:48px; }
@media (max-width:880px){ .home-grid{ grid-template-columns:1fr; } }
.home-block__label{ font-size:11.5px; letter-spacing:.08em; font-weight:500; text-transform:uppercase; color:var(--ink-faint);
margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.home-block__label::after{ content:""; flex:1; height:1px; background:var(--line-strong); }
.home-resume{ background:var(--surface-glass); -webkit-backdrop-filter:var(--blur-glass); backdrop-filter:var(--blur-glass);
border:1px solid var(--glass-edge); border-radius:var(--radius-md); box-shadow:var(--shadow-1);
padding:18px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.home-resume__text{ flex:1; min-width:180px; }
.home-resume__tool{ font-size:14.5px; font-weight:600; color:var(--ink); }
.home-resume__hint{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.home-quick{ display:flex; flex-direction:column; gap:8px; }
.home-quick__item{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line);
border-radius:var(--radius-md); box-shadow:var(--shadow-1); padding:12px 16px; color:var(--ink);
transition:transform .3s var(--spring, ease), box-shadow .2s ease; }
.home-quick__item:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.home-quick__name{ flex:1; min-width:0; font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-quick__go{ width:32px; height:32px; border-radius:50%; background:var(--dark); color:var(--dark-ink);
display:inline-flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;
transition:transform .3s var(--spring, ease), background .2s ease; }
.home-quick__item:hover .home-quick__go{ transform:translateX(2px) scale(1.08); background:var(--dark-2); }
.home-quick__meta{ font-size:12px; color:var(--ink-faint); flex-shrink:0; }
.home-quick__item .statuspill{ flex-shrink:0; }
.home-quick__item--add{ border-style:dashed; box-shadow:none; background:transparent; color:var(--ink-soft); }
.home-quick__item--add:hover{ background:var(--surface); color:var(--ink); }
.home-quick__item--add .home-quick__go{ background:transparent; border:1px dashed var(--line-3); color:var(--ink-soft); }
@media (max-width:520px){ .home-quick__item .statuspill{ display:none; } }
.home-pending{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:14px 2px 0; }
.home-pending a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
.home-all{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:13.5px; color:var(--ink-soft); }
.home-all:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:640px){
.home-hero__panel{ margin:-56px 10px 0; padding:20px 20px 18px; }
.home-grid{ margin-top:36px; gap:32px; }
}
/* ---------------------------------------------------------------
17b · CATÁLOGO v3 — bento without photography (design experiment,
scoped to .cat-grid--v3: cards pop off the canvas as physical panels;
accent cards carry a silky gradient sheen in the app's navy/terracotta)
--------------------------------------------------------------- */
.cat-grid--v3 .cat-tile{ position:relative; border:none; border-radius:28px; background:var(--surface);
box-shadow:0 1px 2px rgba(15,26,42,.06), 0 8px 24px rgba(15,26,42,.10), 0 24px 48px rgba(15,26,42,.08),
inset 0 1px 0 rgba(255,255,255,.6);
transition:transform .2s ease-out, box-shadow .2s ease-out; }
.cat-grid--v3 .cat-tile:hover{ transform:translateY(-4px);
box-shadow:0 2px 4px rgba(15,26,42,.07), 0 14px 34px rgba(15,26,42,.13), 0 34px 68px rgba(15,26,42,.10),
inset 0 1px 0 rgba(255,255,255,.6); }
/* the photo strip becomes a floating squircle logo badge */
.cat-grid--v3 .cat-tile__art{ height:auto; background:none; padding:24px 24px 0; overflow:visible; }
.cat-grid--v3 .cat-tile__art::before, .cat-grid--v3 .cat-tile__art::after{ content:none; }
/* the logo mark IS the family colour: a solid family-tinted squircle with the glyph
reversed out in cream. On the two accent cards (whose background already carries the
family colour) it inverts to a cream tile with the family glyph, so it stays legible. */
.cat-grid--v3 .cat-tile__art .logo-mark{ position:static; width:44px; height:44px; border-radius:15px;
background:var(--fam-ink, var(--dark)); -webkit-backdrop-filter:none; backdrop-filter:none; border:none;
box-shadow:0 1px 2px rgba(15,26,42,.10), 0 6px 16px rgba(15,26,42,.18); color:#FFF9F2; }:root[data-theme="dark"] .cat-grid--v3 .cat-tile__art .logo-mark{ color:#16283E; }.cat-grid--v3 .cat-tile__art svg.logo-glyph{ width:22px; height:22px; }
.cat-grid--v3 .cat-tile__name{ color:var(--dark); }
.cat-grid--v3 .cat-tile__btn.btn--ghost{ color:var(--ink-soft); }/* locked: quiet white card, frosted lock chip pinned to the card corner */
.cat-grid--v3 .cat-tile__lock{ top:18px; right:18px; background:var(--surface);
-webkit-backdrop-filter:none; backdrop-filter:none; border:none;
box-shadow:0 1px 2px rgba(15,26,42,.08), 0 6px 16px rgba(15,26,42,.12); color:var(--dark); }
.cat-grid--v3 .cat-tile--locked .cat-tile__art .logo-mark{ opacity:1; filter:none; }
/* coming soon: the SAME floating card as the rest — badge, radius, shadows — just
visibly muted: grey badge, softened type, quieter lift. "Not yet", not "different". */
.cat-grid--v3 .cat-tile--soon{ background:var(--surface); }
.cat-grid--v3 .cat-tile--soon:hover{ transform:translateY(-2px); }
.cat-grid--v3 .cat-tile--soon .cat-tile__art{ display:block; filter:none; opacity:1; height:auto; }
.cat-grid--v3 .cat-tile--soon .cat-tile__art .logo-mark{ display:flex;
background:var(--fam-ink, var(--ink-faint)); color:#FFF9F2; opacity:.42;
box-shadow:0 1px 2px rgba(15,26,42,.05), 0 4px 10px rgba(15,26,42,.07); }
.cat-grid--v3 .cat-tile--soon .cat-tile__name{ color:var(--ink-soft); }
.cat-grid--v3 .cat-tile--soon .cat-tile__desc{ color:var(--ink-faint); }
.cat-grid--v3 .cat-tile--soon .cat-tile__meta{ opacity:.8; }
/* catalog search (replaces the trial pill), plan-tier marks, feedback chips */
.cat-search{ width:min(320px, 100%); position:relative; }
/* type-ahead dropdown: small and simple — exactly the width of the search field it
drops out of (left+right pinned), so it can never bleed off the screen edge */
.cat-suggest{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40;
background:var(--surface); border-radius:16px; padding:5px; max-height:250px; overflow-y:auto;
box-shadow:0 1px 2px rgba(15,26,42,.06), 0 8px 20px rgba(15,26,42,.12); }
.cat-suggest[hidden]{ display:none; }
.cat-suggest__item{ display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:11px;
color:var(--ink); font-size:13.5px; transition:background .12s ease; }
.cat-suggest__item:hover, .cat-suggest__item.is-active{ background:var(--canvas-deep); }
.cat-suggest__mark{ width:22px; height:22px; border-radius:7px; flex-shrink:0;
background:var(--fam-ink, var(--dark)); color:#FFF9F2; display:flex; align-items:center; justify-content:center; }
.cat-suggest__mark svg{ width:13px; height:13px; }
.cat-suggest__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-suggest__none{ padding:10px; font-size:12.5px; color:var(--ink-faint); text-align:center; }
:root[data-theme="dark"] .cat-suggest{ box-shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.45), 0 26px 52px rgba(0,0,0,.35); }
:root[data-theme="dark"] .cat-suggest__mark{ color:#16283E; }
/* ---- family ink: every tool's logo glyph carries its document family's colour,
sampled from the accent cards (actas = the terracotta card, comunicaciones = the
navy card) and kept deep and professional for the rest ---- */
.fam-actas{ --fam-ink:#A84C29; }
.fam-comunicaciones{ --fam-ink:#1F3C5C; }
.fam-certificados{ --fam-ink:#1E4D3B; }
.fam-informes{ --fam-ink:#5D3040; }
.fam-encargos{ --fam-ink:#6B4E18; }
:root[data-theme="dark"] .fam-actas{ --fam-ink:#D89372; }
:root[data-theme="dark"] .fam-comunicaciones{ --fam-ink:#8FB4DA; }
:root[data-theme="dark"] .fam-certificados{ --fam-ink:#7FB49A; }
:root[data-theme="dark"] .fam-informes{ --fam-ink:#C795A6; }
:root[data-theme="dark"] .fam-encargos{ --fam-ink:#CFAE6B; }
/* "Ver detalles" + the feedback bubble, side by side — two real targets that cannot
overlap each other (44px is the smallest comfortable one for a thumb) */
.cat-tile__row{ display:flex; align-items:center; gap:6px; }
.cat-tile__row .cat-tile__btn{ flex:1; min-width:0; }
.cat-fb{ flex-shrink:0; width:44px; height:44px; border-radius:50%;
display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--ink-faint);
transition:background .15s ease, color .15s ease; }
.cat-fb:hover{ background:var(--canvas-deep); color:var(--ink); }
/* ---- per-tool feedback page (/opinion/) ---- */
.fb-page{ max-width:680px; }
.fb-tool{ display:flex; align-items:center; gap:16px; margin:18px 0 6px; }
/* the tool's full mark, same squircle as its detail page — a bare glyph read as an
afterthought here; the icon IS the tool's identity */
.fb-tool__mark{ width:72px; height:72px; border-radius:24px; flex-shrink:0;
background:var(--fam-ink, var(--dark)); color:#FFF9F2; display:flex;
align-items:center; justify-content:center;
box-shadow:0 1px 2px rgba(15,26,42,.10), 0 8px 20px rgba(15,26,42,.20); }
.fb-tool__mark svg{ width:36px; height:36px; }
:root[data-theme="dark"] .fb-tool__mark{ color:#16283E; }
.fb-tool__name{ margin:2px 0 0; }
.fb-lead{ margin:0 0 24px; }
.fb-form{ display:flex; flex-direction:column; gap:22px; }
.fb-label{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
font-weight:500; color:var(--ink-faint); margin:0 0 9px; padding:0; }
.fb-field{ display:block; }
.fb-kinds{ border:0; padding:0; margin:0; }
.fb-kind{ display:flex; align-items:center; gap:9px; padding:11px 14px; margin-bottom:8px;
background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
font-size:14.5px; color:var(--ink); cursor:pointer;
transition:border-color .15s ease, box-shadow .15s ease; }
.fb-kind:hover{ border-color:var(--ink-faint); }
.fb-kind:has(input:checked){ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.fb-kind input{ accent-color:var(--accent); margin:0; flex-shrink:0; }
.fb-text{ font:inherit; font-size:14.5px; padding:12px 15px; resize:vertical; min-height:132px; }
.fb-hint{ display:block; font-size:12.5px; color:var(--ink-faint); margin-top:7px; }
.fb-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.fb-privacy{ display:flex; gap:8px; font-size:12.5px; color:var(--ink-faint);
line-height:1.55; margin-top:26px; }
.fb-privacy i{ flex-shrink:0; margin-top:2px; }
.fb-thanks{ background:var(--surface); border-radius:var(--radius-lg); padding:32px;
box-shadow:var(--shadow-2); margin-top:22px; }
.fb-thanks__mark{ font-size:34px; color:var(--positive); line-height:1; }
.fb-thanks__h{ font-family:var(--font-display); font-size:26px; font-weight:500;
color:var(--ink); margin:12px 0 8px; }
.fb-thanks__p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 22px; }
.fb-thanks__actions{ display:flex; flex-wrap:wrap; gap:10px; }
/* dark theme: same panels, deeper shadows, quieter highlight */
:root[data-theme="dark"] .cat-grid--v3 .cat-tile{
box-shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.4), 0 26px 52px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,.05); }
:root[data-theme="dark"] .cat-grid--v3 .cat-tile:hover{
box-shadow:0 2px 4px rgba(0,0,0,.4), 0 16px 36px rgba(0,0,0,.5), 0 36px 70px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.05); }
/* (the logo mark keeps its family-coloured fill in dark mode — see §17b) */
:root[data-theme="dark"] .cat-grid--v3 .cat-tile__lock{ background:var(--canvas-deep); color:var(--ink); }/* ---------------------------------------------------------------
17d · TOOL DETAIL — no photography here: the family-coloured logo
carries the identity and the page is all substance (how it works,
how you use it), on the same floating cream panels as the cards.
--------------------------------------------------------------- */
.tool-page{ max-width:840px; }
.tool-hero{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start;
background:var(--surface); border-radius:28px; padding:32px 34px 28px;
box-shadow:0 1px 2px rgba(15,26,42,.06), 0 8px 24px rgba(15,26,42,.10), 0 24px 48px rgba(15,26,42,.08),
inset 0 1px 0 rgba(255,255,255,.6); }
.tool-hero__mark{ width:80px; height:80px; border-radius:26px; flex-shrink:0;
background:var(--fam-ink, var(--dark)); color:#FFF9F2; display:flex; align-items:center; justify-content:center;
box-shadow:0 1px 2px rgba(15,26,42,.10), 0 8px 20px rgba(15,26,42,.20); }
.tool-hero__mark svg{ width:40px; height:40px; }
.tool-hero__main{ min-width:0; }
.tool-hero__name{ font-size:clamp(28px, 3.2vw, 40px); margin:4px 0 0; }
.tool-hero__desc{ font-size:16.5px; color:var(--ink-soft); line-height:1.6; margin:14px 0 0; max-width:56ch; }
.tool-hero__badges{ margin-top:16px; display:flex; gap:18px; flex-wrap:wrap; }
.tool-hero__badges:empty{ display:none; }
.tool-hero__cta{ grid-column:1 / -1; margin-top:22px; padding-top:22px; border-top:1px solid var(--line);
display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tool-hero__cta form{ margin:0; }
/* sections */
.tool-sec{ margin-top:40px; }
.tool-sec__label{ font-size:11.5px; letter-spacing:.08em; font-weight:500; text-transform:uppercase;
color:var(--ink-faint); margin-bottom:14px; display:flex; align-items:center; gap:12px; }
.tool-sec__label::after{ content:""; flex:1; height:1px; background:var(--line-strong); }
/* the journey — one card, hairline-divided rows, numbers in the family colour */
.tool-steps2{ list-style:none; margin:0; padding:0; background:var(--surface); border-radius:22px;
overflow:hidden; box-shadow:0 1px 2px rgba(15,26,42,.05), 0 8px 22px rgba(15,26,42,.09); }
.tool-step2{ display:flex; gap:16px; padding:16px 22px; border-top:1px solid var(--line); }
.tool-step2:first-child{ border-top:0; }
.tool-step2__n{ font-family:var(--font-display); font-size:21px; font-weight:500; line-height:1.1;
color:var(--fam-ink, var(--dark)); width:26px; flex-shrink:0; }
.tool-step2__t{ font-size:15px; font-weight:600; color:var(--ink); }
.tool-step2__p{ font-size:14px; color:var(--ink-soft); line-height:1.55; margin:3px 0 0; }
/* the practical guide — one panel per phase */
.tool-guide{ display:flex; flex-direction:column; gap:12px; }
.tool-guide__item{ display:flex; gap:18px; background:var(--surface); border-radius:22px; padding:22px 24px;
box-shadow:0 1px 2px rgba(15,26,42,.05), 0 8px 22px rgba(15,26,42,.09); }
/* each phase carries its own pictogram, drawn in the family colour */
.tool-guide__art{ width:64px; height:64px; flex-shrink:0; border-radius:20px; padding:11px;
background:var(--canvas-deep); display:flex; align-items:center; justify-content:center; }
.tool-guide__art .a{ stroke:var(--fam-ink, var(--dark)); }
.tool-guide__art .b{ stroke:var(--fam-ink, var(--dark)); opacity:.55; }
.tool-guide__art .acc{ stroke:var(--accent); }
.tool-guide__art .af{ fill:var(--accent); }
.tool-guide__art .f{ fill:var(--surface); }
.tool-guide__art .p{ fill:var(--surface); }
.tool-guide__n{ font-family:var(--font-display); font-size:15px; font-weight:600; line-height:1;
color:var(--fam-ink, var(--dark)); margin-bottom:5px; letter-spacing:.02em; }
.tool-guide__t{ font-size:16px; font-weight:600; color:var(--ink); }
@media (max-width:600px){ .tool-guide__art{ width:52px; height:52px; border-radius:16px; padding:8px; } }
.tool-guide__p{ font-size:14.5px; color:var(--ink-soft); line-height:1.65; margin:5px 0 0; text-wrap:pretty; }
.tool-tips{ margin:18px 0 0; padding:0 0 0 20px; }
.tool-tips li{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:7px; }
.tool-tips li::marker{ color:var(--fam-ink, var(--accent)); }
.tool-page .detail__promises{ background:var(--surface); border-radius:22px; padding:20px 24px; margin:0;
box-shadow:0 1px 2px rgba(15,26,42,.05), 0 8px 22px rgba(15,26,42,.09); }
.tool-page .detail__promise i{ color:var(--fam-ink, var(--positive)); }
:root[data-theme="dark"] .tool-hero__mark, :root[data-theme="dark"] .tool-guide__n{ color:#16283E; }
@media (max-width:600px){
.tool-hero{ grid-template-columns:1fr; gap:18px; padding:26px 22px 22px; }
.tool-hero__mark{ width:64px; height:64px; border-radius:20px; }
.tool-hero__mark svg{ width:32px; height:32px; }
.tool-guide__item{ padding:18px 18px; gap:14px; }
}
@media (prefers-reduced-motion: no-preference){
.tool-hero{ animation:cat-rise .5s cubic-bezier(.22,1,.36,1) backwards; }
.tool-sec{ animation:cat-rise .5s cubic-bezier(.22,1,.36,1) backwards; animation-delay:.08s; }
.tool-guide__item, .tool-step2{ animation:cat-rise .45s cubic-bezier(.22,1,.36,1) backwards;
animation-delay:calc(.12s + var(--i, 0) * 55ms); }
}
/* ---------------------------------------------------------------
18 · MOTION — morphing + fluid physics (restrained)
--------------------------------------------------------------- */
:root{ --spring:cubic-bezier(.34,1.56,.64,1); } /* gentle overshoot — "pliable" not bouncy */
@media (prefers-reduced-motion: no-preference){
/* cross-page morphs: the lit nav pill and the page title glide between pages
(View Transitions API — progressive enhancement, ignored where unsupported) */
@view-transition{ navigation:auto; }
.nav__item--active{ view-transition-name:nav-pill; }
.page-title{ view-transition-name:page-title; }
::view-transition-group(nav-pill), ::view-transition-group(page-title){ animation-duration:.32s; animation-timing-function:cubic-bezier(.22,1,.36,1); }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.22s; }
/* fluid: interactive elements answer with a springy, physical response */
.btn{ transition:background .18s ease, border-color .18s ease, color .18s ease,
transform .35s var(--spring), box-shadow .25s ease; }
.btn:not(.btn--disabled):not([disabled]):active{ transform:scale(.96); }
.cat-tile{ transition:transform .45s var(--spring), box-shadow .3s ease; }
.cat-tile:hover{ transform:translateY(-3px); }
.cat-tile__art .logo-mark{ transition:transform .4s var(--spring); }
.cat-tile:hover .cat-tile__art .logo-mark{ transform:translateY(-3px) scale(1.06); }
.filter-chip, .signer-opt{ transition:background .18s ease, color .18s ease, border-color .18s ease, transform .3s var(--spring); }
.filter-chip:active, .signer-opt:active{ transform:scale(.94); }
.md-item, .nav__item{ transition:background .18s ease, color .18s ease, transform .3s var(--spring); }
.md-item:active, .nav__item:active{ transform:scale(.98); }
.photo-area, .dropzone{ transition:box-shadow .25s ease, transform .4s var(--spring); }
.dropzone__icon{ transition:transform .4s var(--spring), border-radius .4s var(--spring); }
.dropzone:hover .dropzone__icon{ transform:translateY(-4px); border-radius:32px; }
.icon-btn, .cap-tool, .toolbar__back{ transition:background .15s ease, color .15s ease, transform .3s var(--spring); }
.icon-btn:active, .cap-tool:active, .toolbar__back:active{ transform:scale(.9); }
/* morph: the mic is a circle at rest and melts into a rounded stop-square while recording */
.cap__rec{ transition:transform .35s var(--spring), box-shadow .25s ease, background .2s ease, border-radius .45s var(--spring); }
.cap__rec--on{ border-radius:34%; }
.cap__rec--on::before, .cap__rec--on::after{ border-radius:inherit; }
/* menus and modals pop in like soft material, not appear like flat panels */
.obra-menu:not([hidden]), .account__menu:not([hidden]){ animation:menu-pop .28s var(--spring); transform-origin:var(--pop-origin, top right); }
.account__menu:not([hidden]){ --pop-origin:bottom center; }
.leave:not([hidden]) .leave__card, .onb__card{ animation:card-pop .38s var(--spring); }
@keyframes menu-pop{ from{ opacity:0; transform:scale(.94) translateY(4px); } to{ opacity:1; transform:none; } }
@keyframes card-pop{ from{ opacity:0; transform:scale(.94) translateY(10px); } to{ opacity:1; transform:none; } }
/* Catálogo arrival: the header settles, then the cards rise in sequence instead of
the page simply appearing. `backwards` fill only — so the hover lift still works
once the entrance has finished. */
.cat-head{ animation:cat-head-in .45s cubic-bezier(.22,1,.36,1) backwards; }
.cat-grid > .cat-tile{ animation:cat-rise .55s cubic-bezier(.22,1,.36,1) backwards;
animation-delay:calc(.06s + var(--i, 0) * 65ms); }
.cat-section-label, .cat-divider{ animation:cat-head-in .5s cubic-bezier(.22,1,.36,1) backwards; animation-delay:.12s; }
@keyframes cat-head-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
@keyframes cat-rise{ from{ opacity:0; transform:translateY(18px) scale(.985); } to{ opacity:1; transform:none; } }
/* the stepper's active dot swells into place as steps change pages */
.rail__dot{ transition:background .25s ease, color .25s ease, box-shadow .35s var(--spring), transform .35s var(--spring); }
.rail__dot--active{ transform:scale(1.12); }
.home-hero__panel{ animation:card-pop .45s var(--spring); }
.stat-chip{ animation:rise-soft .5s ease both; animation-delay:calc(var(--i, 0) * 70ms); }
@keyframes rise-soft{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
}
/* a photo area the studio's own documents never leave empty */
.gate-photos__none--warn { color: var(--amber-700, #92400e); font-weight: 600; }
.gate-photos__warn { display: block; margin-top: 2px; font-size: 12.5px; color: var(--amber-700, #92400e); }