*{box-sizing:border-box}
body{margin:0}
.dsroot{
--bg:#EEF1F6;--surface:#FFFFFF;--surface-2:#E6EBF2;--surface-3:#DAE1EC;
--ink:#0D1B2A;--ink-2:#3E4E63;--muted:#6B7C93;--line:#DCE2EC;--line-2:#C4CDDB;
--primary:#1B3A6B;--primary-hover:#152E55;--primary-press:#0F2340;--primary-soft:#E3EAF4;--on-primary:#FFFFFF;--gold:#C9A84C;--gold-strong:#8A6D1F;--gold-ink:#6E5518;--accent:#2166B8;
--ok:#1C6B3E;--ok-soft:#E3F0E7;--ok-line:#B9D8C4;
--warn:#8A5200;--warn-vivid:#C6871B;--warn-soft:#F6ECD7;--warn-line:#E4CE9C;
--err:#A31D1D;--err-soft:#F8E4E2;--err-line:#E7BDB9;
--info:#22557E;--info-soft:#E3EDF4;--info-line:#B8CFDF;
--ring:0 0 0 3px rgba(27,58,107,.24);
--r-xs:4px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-pill:999px;
--sh-1:0 1px 2px rgba(24,28,20,.06),0 1px 1px rgba(24,28,20,.04);
--sh-2:0 4px 14px -6px rgba(24,28,20,.18),0 1px 3px rgba(24,28,20,.06);
--sh-3:0 18px 40px -18px rgba(24,28,20,.34),0 4px 12px -6px rgba(24,28,20,.14);
--ff-display:'Playfair Display',serif;--ff-text:'Inter',sans-serif;--ff-mono:'JetBrains Mono',monospace;
background:var(--bg);color:var(--ink);font-family:var(--ff-text);min-height:100vh;-webkit-font-smoothing:antialiased}
.dsroot.dark{
--bg:#0D1B2A;--surface:#14263B;--surface-2:#1B3352;--surface-3:#244063;
--ink:#F4F7FF;--ink-2:#B8C6DD;--muted:#7E90AC;--line:#24405F;--line-2:#34527A;
--primary:#6FA0DC;--primary-hover:#84B0E6;--primary-press:#97BEEC;--primary-soft:#16273D;--on-primary:#0D1B2A;--gold:#E8C96A;--gold-strong:#E8C96A;--gold-ink:#E8C96A;--accent:#4E9BE8;
--ok:#4FB07C;--ok-soft:#17251C;--ok-line:#2E4B39;--warn:#DDA043;--warn-vivid:#E7B45E;--warn-soft:#2A2113;--warn-line:#4A3B1C;
--err:#E5766B;--err-soft:#2A1614;--err-line:#4C2723;--info:#6BA6D8;--info-soft:#131F29;--info-line:#26404F;--ring:0 0 0 3px rgba(111,160,220,.30)}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.mono{font-family:var(--ff-mono)}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-hover)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ff-text);font-weight:600;font-size:14.5px;line-height:1;padding:12px 18px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;transition:.12s;white-space:nowrap;text-decoration:none}
.btn.lg{padding:15px 24px;font-size:16px}
.btn svg{width:17px;height:17px}
.btn-pri{background:var(--primary);color:var(--on-primary)}
.btn-pri:hover{background:var(--primary-hover)}
.btn-sec{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-sec:hover{background:var(--surface-2);border-color:var(--muted)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2)}
.btn:disabled,.btn.s-disabled{opacity:.5;cursor:not-allowed}
.spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* fields */
.field{display:flex;flex-direction:column;gap:6px}
.flabel{font-size:13px;font-weight:600;color:var(--ink)}
.input{width:100%;font-family:var(--ff-text);font-size:14.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);padding:11px 13px;transition:.12s}
.input::placeholder{color:var(--muted)}
.input:hover{border-color:var(--muted)}
.input:focus,.input.s-focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.input.s-error{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 20%,transparent)}
.input:disabled,.input.s-disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
.fhelp{font-size:12.5px;color:var(--muted)}
.fhelp.err{color:var(--err);display:flex;align-items:center;gap:6px}
.fhelp.err svg{width:14px;height:14px;flex:none}
.checkrow{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.cbox{width:20px;height:20px;border-radius:var(--r-xs);border:1.5px solid var(--line-2);background:var(--surface);flex:none;display:flex;align-items:center;justify-content:center;color:#fff;margin-top:1px}
.cbox svg{width:13px;height:13px;opacity:0}
.cbox.on{background:var(--primary);border-color:var(--primary)}
.cbox.on svg{opacity:1}
.cbox.s-error{border-color:var(--err)}

/* dropzone */
.dz{border:2px dashed var(--line-2);border-radius:var(--r-lg);padding:32px;text-align:center;background:var(--surface-2)}
.dz-ico{width:42px;height:42px;color:var(--muted);margin:0 auto 12px;display:block}
.dz-t{font-weight:700;font-size:15px;font-family:var(--ff-display)}
.dz-s{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45}
.dz-s b{color:var(--primary);font-weight:600}
.dz.drag{border-color:var(--primary);background:var(--primary-soft)}
.dz.drag .dz-ico{color:var(--primary)}

/* kpi */
.kpigrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.kpi{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;background:var(--surface)}
.kpi-l{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.35;min-height:34px}
.kpi-v{font-family:var(--ff-display);font-weight:800;font-size:31px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:10px;display:flex;align-items:baseline;gap:5px}
.kpi-u{font-size:14px;font-weight:600;color:var(--muted)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
@media(max-width:900px){.tiers{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}
.tier{border:1px solid var(--line);border-radius:var(--r-xl);padding:28px;background:var(--surface);display:flex;flex-direction:column;box-shadow:var(--sh-1)}
.tier.feat{background:color-mix(in srgb,var(--gold) 9%,var(--surface));border-color:color-mix(in srgb,var(--gold) 48%,transparent);box-shadow:var(--sh-2)}
.tier.full{background:#0F2340;border-color:#28456C;color:#F4F7FF;box-shadow:var(--sh-2)}
/* en tema oscuro el azul fijo del diseño se confunde con el fondo de página:
   la tarjeta necesita un fondo propio, más claro que cualquier superficie */
.dark .tier.full{background:linear-gradient(158deg,#2A4E7A 0%,#1D3A5E 55%,#162C49 100%);border-color:#3D6497}
.tier-badge{align-self:flex-start;font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:4px 10px;border-radius:var(--r-sm);border:1px solid;color:var(--primary);background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 26%,transparent)}
.tier.feat .tier-badge{color:var(--gold-ink);background:color-mix(in srgb,var(--gold) 20%,transparent);border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.tier.full .tier-badge{color:#E8C96A;background:rgba(232,201,106,.12);border-color:rgba(232,201,106,.5)}
.tier-n{font-family:var(--ff-display);font-weight:900;font-size:25px;letter-spacing:-.01em;margin:20px 0 0;line-height:1.1}
.tier-d{font-size:13.5px;color:var(--ink-2);margin:8px 0 0;line-height:1.5;min-height:42px}
.tier.full .tier-d{color:#B8C6DD}
.tier-price{display:flex;align-items:flex-start;gap:8px;margin:22px 0 0;flex-wrap:wrap}
.tier-cur{font-family:var(--ff-display);font-weight:700;font-size:19px;color:var(--gold-strong);line-height:1;margin-top:6px}
.tier.full .tier-cur{color:#E8C96A}
.tier-amt{font-family:var(--ff-display);font-weight:900;font-size:46px;line-height:.92;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tier-amt.word{font-size:38px}
.tier-vat{font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-2);align-self:flex-end;margin-bottom:6px}
.tier.full .tier-vat{color:#8FA3C0}
.tier-meta{font-family:var(--ff-display);font-style:italic;font-size:14px;color:var(--ink-2);margin:8px 0 0}
.tier.full .tier-meta{color:#9FB2CE}
.tier-list{list-style:none;padding:0;margin:22px 0 22px;display:flex;flex-direction:column;gap:11px;flex:1}
.tier-list li{display:flex;gap:10px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.tier.full .tier-list li{color:#DDE6F3}
.tier-list li b{color:var(--ink);font-weight:600}
.tier.full .tier-list li b{color:#FFFFFF}
.tier-list svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ok)}
.tier.full .tier-list svg{color:#E8C96A}
.tier-list li.off{color:var(--ink-2)}
.tier-list li.off .dash{width:16px;flex:none;margin-top:2px;display:flex;align-items:center}
.tier-list li.off .dash::before{content:"";width:11px;height:1.5px;background:var(--line-2)}
.btn-gold{background:var(--gold);color:#0D1B2A;border:none}
.btn-gold:hover{background:color-mix(in srgb,var(--gold) 88%,#000)}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn-outline:hover{background:var(--surface-2);border-color:var(--muted)}
.sec-em{display:block;font-style:italic;color:var(--gold-strong)}


/* alert + banner + toast */
.pbanner{display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:var(--r-md);background:var(--primary-soft);max-width:none}
.pbanner svg{width:22px;height:22px;color:var(--primary);flex:none}
.pbanner .pbt{flex:1;font-size:14px;line-height:1.45;color:var(--ink)}
.pbanner .pbt b{color:var(--primary)}
.toast{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2);max-width:420px;border-left:3px solid var(--ok)}
.toast svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--ok)}
.toast .tb{flex:1;font-size:13.5px;line-height:1.4;color:var(--ink)}

/* ---- landing shell ---- */
.pubnav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:24px;padding:14px 40px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--ff-display);font-weight:800;font-size:19px;cursor:pointer;color:var(--ink)}
.nav-lk{display:flex;gap:22px;font-size:14.5px;font-weight:500;margin-left:6px}
.nav-lk a{color:var(--ink-2);cursor:pointer}
.nav-lk a:hover{color:var(--ink)}
.nav-rt{margin-left:auto;display:flex;align-items:center;gap:16px}
.burger{display:none;width:38px;height:38px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;align-items:center;justify-content:center;flex:none}
.burger svg{width:18px;height:18px}
.burger .b-close{display:none}
.burger.open .b-open{display:none}
.burger.open .b-close{display:block}
.mobmenu{display:none;flex-direction:column;gap:2px;padding:10px 20px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.mobmenu.open{display:flex}
.mobmenu a{padding:13px 12px;border-radius:var(--r-md);font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;min-height:48px;display:flex;align-items:center}
.mobmenu a:hover{background:var(--surface-2)}
.nav-login{font-size:14.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.nav-login:hover{color:var(--ink)}
.themebtn{width:34px;height:34px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.themebtn svg{width:16px;height:16px}
.rt-login .pubnav,.rt-login .site-footer{display:none}

.container{max-width:1080px;margin:0 auto;padding:0 40px}
.pg{display:none}
.pg-home{display:block}
.rt-como .pg-home,.rt-precios .pg-home,.rt-ejemplo .pg-home,.rt-login .pg-home{display:none}
.rt-como .pg-como{display:block}
.rt-precios .pg-precios{display:block}
.rt-ejemplo .pg-ejemplo{display:block}
.rt-login .pg-login{display:block}

.band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section{padding-block:60px}
.sec-k{font-family:var(--ff-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);font-weight:600;text-align:center;margin:0 0 10px}
.sec-title{font-family:var(--ff-display);font-weight:800;font-size:34px;letter-spacing:-.02em;text-align:center;margin:0}
.sec-sub{font-size:16px;color:var(--ink-2);text-align:center;margin:12px auto 0;max-width:60ch;line-height:1.55}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:68px 0 52px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:12px;font-weight:600;letter-spacing:.04em;padding:6px 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary)}
.htitle{font-family:var(--ff-display);font-weight:800;font-size:52px;line-height:1.02;letter-spacing:-.025em;margin:20px 0 0;max-width:13ch}
.lead{font-size:18px;line-height:1.55;color:var(--ink-2);margin:22px 0 0;max-width:46ch}
.ctarow{display:flex;gap:14px;align-items:center;margin-top:28px;flex-wrap:wrap}
.trust{display:flex;gap:22px;margin-top:26px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.trust span{display:flex;align-items:center;gap:7px}
.trust svg{width:15px;height:15px;color:var(--ok)}
.herocard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-2)}
.herocard h4{font-family:var(--ff-display);font-weight:700;font-size:16px;margin:0 0 4px}
.herocard .hc-s{font-size:13px;color:var(--muted);margin:0 0 16px}

/* flujo 4 pasos */
.flow4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
@media(max-width:1000px){.flow4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.flow4{grid-template-columns:1fr}}
.flowc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;display:flex;flex-direction:column;box-shadow:var(--sh-1)}
.flow-lab{display:flex;align-items:center;gap:12px;font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--gold-strong)}
.flow-lab .rule{flex:1;height:1px;background:var(--line-2)}
.flow-ico{width:52px;height:52px;border-radius:13px;background:var(--primary-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-top:22px}
.flow-ico svg{width:23px;height:23px}
.flowc h4{font-family:var(--ff-display);font-weight:900;font-size:23px;letter-spacing:-.01em;line-height:1.15;margin:22px 0 0}
.flowc p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:12px 0 0;flex:1}
.flow-pill{align-self:flex-start;margin-top:22px;font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:7px 13px;border-radius:var(--r-sm);border:1px solid}
.flow-pill.free{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)}
.flow-pill.auto{color:var(--primary);background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 26%,transparent)}
.flow-pill.paid{color:var(--gold-ink);background:color-mix(in srgb,var(--gold) 18%,transparent);border-color:color-mix(in srgb,var(--gold) 50%,transparent)}

/* qué entregamos · dossier */
.doss{display:grid;grid-template-columns:.92fr 1.08fr;gap:34px;margin-top:40px;align-items:center}
@media(max-width:860px){.doss{grid-template-columns:1fr;gap:40px}}
/* dossier: portada + hojas interiores abiertas en abanico. Todo en cqi para que
   cada hoja escale como una página, sea cual sea el ancho de la tarjeta. */
/* el margen derecho reserva el hueco que barre el abanico (≈0,43·ancho de hoja),
   de modo que la composición completa cabe siempre dentro de su columna */
.paper-stack{position:relative;margin:0 31% 6% 0}
.paper{position:relative;z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:var(--sh-3);aspect-ratio:1/1.414;container-type:inline-size}
/* ojo: el padding de un contenedor NO puede ir en cqi (esas unidades se resuelven
   contra el ancestro contenedor, no contra sí mismo). En % sí mide sobre la hoja. */
.sheet{position:absolute;inset:0;background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:var(--sh-2);overflow:hidden;container-type:inline-size;padding:7% 6%;transform-origin:0 100%;display:flex;flex-direction:column}
.sheet.s1{transform:translate(13%,2%) rotate(5deg);z-index:1}
.sheet.s2{transform:translate(22%,4%) rotate(9deg);z-index:0}
.sh-hd{display:flex;justify-content:space-between;gap:2cqi;font-family:var(--ff-mono);font-size:2cqi;color:var(--muted);border-bottom:1px solid var(--line-2);padding-bottom:2cqi}
.sh-h{font-family:var(--ff-display);font-weight:900;font-size:4.6cqi;line-height:1.15;color:var(--ink);margin:4.5cqi 0 0}
.sh-lines>span{display:block;height:1.2cqi;border-radius:2px;background:var(--line-2);margin-top:1.9cqi}
.sh-cap{font-family:var(--ff-mono);font-size:1.9cqi;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:4cqi 0 2.2cqi}
.sh-gantt{display:flex;flex-direction:column;gap:1.3cqi}
.sh-gantt i{display:block;height:1.8cqi;border-radius:2px;background:var(--accent);opacity:.85}
.sh-mile{display:flex;align-items:center;gap:1.4cqi}
.sh-mile i{flex:none;width:2.2cqi;height:2.2cqi;border-radius:50%;border:.6cqi solid var(--gold);background:var(--surface)}
.sh-mile b{flex:1;height:.7cqi;background:var(--line-2)}
.sh-tbl{margin-top:3cqi;border:1px solid var(--line-2);border-radius:2px;overflow:hidden;font-size:2.1cqi}
.sh-tbl div{display:flex;border-bottom:1px solid var(--line)}
.sh-tbl div:last-child{border-bottom:none}
.sh-tbl span{flex:1;padding:1.9cqi 2cqi;color:var(--ink-2)}
.sh-tbl span+span{flex:none;width:20cqi;text-align:right;font-family:var(--ff-mono);color:var(--primary)}
.sh-tbl .hd span{background:var(--surface-2);color:var(--ink);font-weight:600}
.sh-ft{margin-top:auto;padding-top:2.4cqi;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:1.8cqi;color:var(--muted)}
/* portada */
.paper.cover{background:linear-gradient(155deg,#39628E 0%,#1B3A6B 42%,#102647 100%);border-color:#102647;color:#F4F7FF;display:flex;flex-direction:column;padding:6%}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:2cqi;font-family:var(--ff-mono);font-size:2.2cqi;letter-spacing:.06em;color:rgba(244,247,255,.62)}
.pc-brand{display:flex;align-items:center;gap:1.8cqi;font-family:var(--ff-display);font-weight:900;font-size:3.4cqi;letter-spacing:.02em;color:#FFFFFF}
.pc-brand svg{width:4cqi;height:4cqi}
.pc-mid{text-align:center;margin-top:11cqi}
.pc-kicker{font-family:var(--ff-text);font-weight:600;font-size:2.2cqi;letter-spacing:.4em;text-transform:uppercase;color:rgba(244,247,255,.7);margin:0}
.pc-title{font-family:var(--ff-text);font-weight:700;font-size:8.6cqi;line-height:1.14;letter-spacing:-.015em;color:#FFFFFF;margin:4cqi 0 0}
.pc-rule{display:block;width:20cqi;height:2px;background:#E8C96A;margin:5cqi auto}
.pc-org{font-family:var(--ff-display);font-style:italic;font-size:3.2cqi;color:rgba(244,247,255,.86);margin:0}
.pc-meta{margin-top:auto;display:flex;flex-direction:column;gap:1.7cqi;font-family:var(--ff-display);font-size:2.7cqi;line-height:1.4;color:rgba(244,247,255,.86)}
.pc-meta p{margin:0}
.pc-meta b{color:#E8C96A;font-weight:700}
.dl{display:flex;flex-direction:column;gap:14px}
.dl-row{display:flex;gap:15px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh-1)}
.dl-ico{width:44px;height:44px;border-radius:11px;background:var(--primary-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.dl-ico svg{width:21px;height:21px}
.dl-t{font-family:var(--ff-display);font-weight:900;font-size:18px;line-height:1.15}
.dl-d{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-top:5px}
.fmt{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.fmt span{font-family:var(--ff-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;padding:4px 9px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--primary);border:1px solid var(--line-2)}
.dl-strip{display:flex;gap:12px;padding:15px 20px;background:#0F2340;border-radius:var(--r-lg);align-items:center;color:#F4F7FF;flex-wrap:wrap}
.dl-stat{display:flex;align-items:center;gap:12px}
.dl-strip .n{font-family:var(--ff-display);font-weight:900;font-size:23px;color:var(--gold)}
.dl-strip .l{font-size:12.5px;color:#B8C6DD;line-height:1.3}
.dl-strip .div{width:1px;height:32px;background:rgba(255,255,255,.16)}

/* vídeo explicativo (exportado desde «LICITAI Vídeo» de Claude Design) */
.vid{max-width:960px;margin:40px auto 0}
.vid-el{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--r-lg);background:#EEF1F6;box-shadow:var(--sh-3)}
@media(max-width:640px){.vid{margin-top:28px}}

/* faq */
.faq{max-width:760px;margin:40px auto 0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.faq-i+.faq-i{border-top:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;background:none;border:none;cursor:pointer;font-family:var(--ff-text);text-align:left;font-weight:600;font-size:15.5px;color:var(--ink)}
.faq-q .chev{width:18px;height:18px;flex:none;transition:transform .25s;color:var(--muted)}
.faq-q .chev.open{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a.open{max-height:340px}
.faq-a p{padding:0 22px 20px;margin:0;font-size:14.5px;line-height:1.62;color:var(--ink-2)}

/* comparison table */
.cmp-wrap{overflow-x:auto;margin-top:36px;border:1px solid var(--line);border-radius:var(--r-lg)}
.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.cmp th,.cmp td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left}
.cmp tr:last-child td{border-bottom:none}
.cmp thead th{font-family:var(--ff-display);font-weight:800;font-size:15px;background:var(--surface-2)}
.cmp .col{text-align:center;width:180px}
.cmp td.col svg{width:18px;height:18px}
.cmp .yes{color:var(--ok)}
.cmp .no{color:var(--muted)}
.cmp .rowh{color:var(--ink);font-weight:600}


/* login */
.login{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.login-aside{background:var(--primary);color:#fff;padding:56px 52px;display:flex;flex-direction:column;justify-content:space-between}
.login-brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);font-weight:800;font-size:22px;cursor:pointer;color:#fff}
.login-val{font-family:var(--ff-display);font-weight:800;font-size:36px;line-height:1.08;letter-spacing:-.02em;margin:0}
.login-vp{font-size:16px;line-height:1.6;color:rgba(255,255,255,.82);margin:18px 0 0;max-width:36ch}
.login-pts{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:12px}
.login-pts li{display:flex;gap:10px;font-size:14.5px;color:rgba(255,255,255,.92)}
.login-pts svg{width:18px;height:18px;flex:none;color:#fff;margin-top:1px}
.login-main{display:flex;align-items:center;justify-content:center;padding:48px;background:var(--bg)}
.authcard{width:100%;max-width:400px}
.auth-h{font-family:var(--ff-display);font-weight:800;font-size:26px;margin:0 0 6px;letter-spacing:-.01em}
.auth-s{font-size:14px;color:var(--ink-2);margin:0 0 24px}
.tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:var(--r-md);padding:4px;margin-bottom:24px}
.tab{flex:1;padding:9px;border-radius:var(--r-sm);border:none;background:none;font-family:var(--ff-text);font-weight:600;font-size:14px;color:var(--ink-2);cursor:pointer}
.tab.active{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.authform{display:flex;flex-direction:column;gap:16px}
.auth-alt{font-size:13.5px;color:var(--ink-2);text-align:center;margin-top:18px}
.auth-alt a{cursor:pointer;font-weight:600}
.auth-flabel-row{display:flex;justify-content:space-between;align-items:baseline}
.auth-forgot{font-size:12.5px;cursor:pointer;font-weight:600}

/* closing + footer */
.closing{text-align:center;padding-block:76px}
.closing h2{font-family:var(--ff-display);font-weight:800;font-size:40px;letter-spacing:-.025em;margin:0 auto 8px;max-width:18ch}
.closing p{font-size:17px;color:var(--ink-2);margin:0 auto 28px;max-width:52ch}
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:40px 0 34px}
.footer-top{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px}
.footer-links a{color:var(--ink-2)}
.footer-links a:hover{color:var(--ink)}
.footer-cr{font-family:var(--ff-mono);font-size:12px;color:var(--muted);margin-top:22px}
.sec-head{text-align:center;padding-top:56px;padding-bottom:8px}
.pg-k{font-family:var(--ff-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);font-weight:600;margin:0 0 10px}
.mut{color:var(--ink-2)}
.callout{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:var(--r-lg);background:var(--primary-soft);max-width:760px;margin:32px auto 0}
.callout svg{width:24px;height:24px;color:var(--primary);flex:none}
.callout p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.callout b{color:var(--primary)}
.pp-ico{display:inline-flex}
.pp-ico svg{width:11px;height:11px;display:none}
.pp-ico.playing .i-pause{display:inline}
.pp-ico.paused .i-play{display:inline}
@keyframes blink{50%{opacity:0}}
@keyframes sceneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ===== dossier de proceso "cómo funciona" ===== */
.tkwrap{margin-top:38px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px 28px 28px;position:relative;overflow:hidden;box-shadow:var(--sh-2)}
.tkwrap::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--gold) 65%,var(--gold))}
.tkwrap::after{content:"";position:absolute;top:-30%;right:-8%;width:380px;height:380px;background:radial-gradient(circle,color-mix(in srgb,var(--gold) 12%,transparent),transparent 62%);pointer-events:none}
.tkwrap>*{position:relative}
.tk-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.tk-brand{font-family:var(--ff-mono);font-size:12px;letter-spacing:.16em;font-weight:600;color:var(--primary);display:flex;align-items:center;gap:10px}
.tk-brand .tk-sep{color:var(--line-2)}
.tk-brand .exp{color:var(--muted)}
.tk-live{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent);animation:tkpulse 1.6s infinite}
@keyframes tkpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 50%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tk-topr{display:flex;align-items:center;gap:14px}
.tk-phasecount{font-family:var(--ff-mono);font-size:12px;letter-spacing:.1em;color:var(--gold-strong);font-weight:600}
.tk-play{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-mono);font-size:11px;font-weight:600;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:6px 13px;cursor:pointer}
.tk-play:hover{border-color:var(--line-2)}
.tk-play .pp-ico svg{width:11px;height:11px;color:var(--gold-strong)}
/* node track */
.tk-track{position:relative;display:flex;justify-content:space-between;margin:28px 6px 6px;padding-top:2px}
.tk-track::before{content:"";position:absolute;left:15px;right:15px;top:16px;height:2px;background:var(--line-2)}
.tk-fill{position:absolute;left:15px;top:16px;height:2px;background:linear-gradient(90deg,var(--primary),var(--gold));transition:width .5s ease;max-width:calc(100% - 30px)}
.tk-node{position:relative;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:9px;padding:0;flex:1;font-family:var(--ff-text)}
.tk-ndot{width:32px;height:32px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);font-size:12px;font-weight:600;color:var(--muted);transition:.25s;position:relative;z-index:1}
.tk-ndot svg{width:15px;height:15px;display:none}
.tk-node.done .tk-ndot{background:var(--gold);border-color:var(--gold);color:#0D1B2A}
.tk-node.done .tk-ndot svg{display:block}
.tk-node.done .tk-ndot b{display:none}
.tk-node.active .tk-ndot{background:var(--primary);border-color:var(--primary);color:var(--on-primary);box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 18%,transparent);animation:tknode 1.6s infinite}
@keyframes tknode{0%{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 22%,transparent)}70%{box-shadow:0 0 0 11px transparent}100%{box-shadow:0 0 0 4px transparent}}
.tk-nlab{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.02em;color:var(--muted);max-width:76px;line-height:1.2;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-node.active .tk-nlab{color:var(--ink)}
.tk-node.done .tk-nlab{color:var(--ink-2)}
/* main grid */
.tk-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-top:24px}
@media(max-width:840px){.tk-grid{grid-template-columns:1fr}}
.tk-proc{position:relative;height:238px;border:1px solid var(--line);border-radius:var(--r-lg);background:#FFFFFF;overflow:hidden;display:flex;align-items:center;justify-content:center}
.tk-proc::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--primary) 12%,transparent) 1px,transparent 0);background-size:20px 20px;opacity:.5}
.tk-scan{position:absolute;left:0;right:0;height:70px;top:-70px;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--accent) 8%,transparent) 55%,color-mix(in srgb,var(--accent) 15%,transparent));border-bottom:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);animation:tkscan 3.6s linear infinite;pointer-events:none}
@keyframes tkscan{0%{top:-70px}100%{top:100%}}
.tk-brk{position:absolute;width:16px;height:16px;border:2px solid var(--gold);opacity:.85}
.tk-brk.tl{top:12px;left:12px;border-right:none;border-bottom:none}
.tk-brk.tr{top:12px;right:12px;border-left:none;border-bottom:none}
.tk-brk.bl{bottom:12px;left:12px;border-right:none;border-top:none}
.tk-brk.br{bottom:12px;right:12px;border-left:none;border-top:none}
.tk-coord{position:absolute;left:16px;bottom:14px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}
.tk-scene{display:none;position:relative;width:210px;height:158px;animation:sceneIn .45s ease}
.sc-a0 .tk-scene.sc0,.sc-a1 .tk-scene.sc1,.sc-a2 .tk-scene.sc2,.sc-a3 .tk-scene.sc3,.sc-a4 .tk-scene.sc4,.sc-a5 .tk-scene.sc5,.sc-a6 .tk-scene.sc6,.sc-a7 .tk-scene.sc7{display:block}
.tk-side{display:flex;flex-direction:column;gap:14px}
.tk-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tk-metric{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);padding:13px 12px}
.tk-mv{font-family:var(--ff-display);font-weight:900;font-size:24px;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;animation:tkpop .4s ease}
@keyframes tkpop{from{opacity:.2;transform:translateY(-3px)}to{opacity:1;transform:none}}
.tk-ml{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:6px;line-height:1.2}
.tk-console{flex:1;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);padding:14px 15px;display:flex;flex-direction:column;gap:9px;min-height:118px}
.tk-ctitle{font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tk-line{font-family:var(--ff-mono);font-size:12px;display:flex;align-items:center;gap:8px;color:var(--muted)}
.tk-line .tk-arrow{color:var(--line-2)}
.tk-line.done{color:var(--ok)}
.tk-line.done .tk-arrow{color:var(--ok)}
.tk-line.cur{color:var(--ink)}
.tk-line.cur .tk-arrow{color:var(--primary)}
.tk-cur{display:none;width:7px;height:14px;background:var(--accent);margin-left:1px}
.tk-line.cur .tk-cur{display:inline-block;animation:blink 1s steps(1) infinite}
.tk-foot{margin-top:22px}
.tk-ftech{font-family:var(--ff-mono);font-size:12px;letter-spacing:.06em;color:var(--gold-strong);font-weight:600}
.tk-msg{font-family:var(--ff-display);font-weight:900;font-size:29px;line-height:1.08;color:var(--ink);margin:8px 0 0;min-height:2.05em;letter-spacing:-.01em}
.tk-bar{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:12px}
.tk-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:99px;transition:width .06s linear}
/* ejemplo: fases + documentación sincronizadas */
.exf{display:grid;grid-template-columns:302px 1fr;gap:24px;margin-top:36px;align-items:start}
@media(max-width:860px){.exf{grid-template-columns:1fr}}
.exf-rail{position:sticky;top:80px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);padding:14px;display:flex;flex-direction:column;gap:2px}
.exf-railhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 10px}
.exf-railk{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.exf-play{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-mono);font-size:10.5px;font-weight:600;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:5px 11px;cursor:pointer}
.exf-i{display:grid;grid-template-columns:28px 1fr;gap:11px;padding:9px 10px;border-radius:var(--r-md);cursor:pointer;border:1px solid transparent;text-align:left;background:none;font-family:var(--ff-text);align-items:start;width:100%}
.exf-i:hover{background:var(--surface-2)}
.exf-i.active{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 32%,transparent)}
.exf-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);font-size:11.5px;font-weight:600;border:2px solid var(--line-2);color:var(--muted);background:var(--surface);margin-top:1px}
.exf-dot svg{width:14px;height:14px}
.exf-check{display:none}
.exf-i.done .exf-dot{background:var(--ok);border-color:var(--ok);color:#fff}
.exf-i.done .exf-check{display:block}
.exf-i.done .exf-num{display:none}
.exf-i.active .exf-dot{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.exf-tech{font-size:13px;font-weight:600;color:var(--ink);display:block}
.exf-i.active .exf-tech{color:var(--primary)}
.exf-give{font-size:11.5px;color:var(--muted);line-height:1.35;margin-top:2px;display:block}
.exf-doc{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface-2);overflow:hidden}
.exf-dochead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.exf-doctitle{font-family:var(--ff-display);font-weight:800;font-size:16px}
.exf-docmeta{font-family:var(--ff-mono);font-size:11px;color:var(--muted);margin-top:2px}
.exf-prog{display:flex;align-items:center;gap:10px;flex:none}
.exf-progbar{width:110px;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.exf-progbar i{display:block;height:100%;background:var(--primary);border-radius:99px;transition:width .4s ease}
.exf-progn{font-family:var(--ff-mono);font-size:11px;font-weight:600;color:var(--primary)}
.exf-scroll{max-height:600px;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:13px}
.exf-block{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:18px;transition:opacity .35s,box-shadow .35s,border-color .35s}
.exf-block.locked{opacity:.5}
.exf-block.cur{border-color:color-mix(in srgb,var(--primary) 48%,transparent);box-shadow:var(--sh-2)}
.exf-btag{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--primary);background:var(--primary-soft);padding:3px 9px;border-radius:99px}
.exf-block.locked .exf-btag{color:var(--muted);background:var(--surface-2)}
.exf-bh{font-family:var(--ff-display);font-weight:700;font-size:16px;margin:12px 0 0}
.exf-bd{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:8px 0 0}
.exf-lock{display:none;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:12px;font-family:var(--ff-mono)}
.exf-lock svg{width:13px;height:13px}
.exf-block.locked .exf-detail{display:none}
.exf-block.locked .exf-lock{display:flex}
.exf-files{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.exf-file{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--r-md);padding:7px 11px;font-size:12px;font-family:var(--ff-mono);color:var(--ink-2)}
.exf-file .tag{font-weight:700;color:var(--primary)}
.exf-lines>span{display:block;height:8px;border-radius:3px;background:var(--surface-3);margin-top:8px}
.exf-outline{list-style:none;padding:0;margin:12px 0 0;counter-reset:o;display:flex;flex-direction:column;gap:8px}
.exf-outline li{display:flex;gap:10px;font-size:13px;color:var(--ink-2);line-height:1.4}
.exf-outline li::before{counter-increment:o;content:counter(o);font-family:var(--ff-mono);font-size:11px;color:var(--primary);font-weight:600;flex:none;width:16px;margin-top:1px}
.exf-note{font-family:var(--ff-mono);font-size:12px;color:var(--primary);font-weight:600;margin-top:12px}
.exf-sub{border:1px solid var(--line);border-radius:var(--r-md);padding:12px;margin-top:10px;background:var(--surface-2)}
.exf-sub .lbl{font-size:12.5px;font-weight:600;color:var(--ink)}
.exf-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.exf-kpi{border:1px solid var(--line);border-radius:var(--r-md);padding:12px;background:var(--surface-2)}
.exf-kpi .l{font-size:10.5px;color:var(--muted);line-height:1.3;min-height:26px}
.exf-kpi .v{font-family:var(--ff-display);font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;margin-top:6px}
.exf-chart{display:flex;align-items:flex-end;gap:7px;height:74px;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.exf-bar{flex:1;background:var(--primary);border-radius:3px 3px 0 0;min-height:6px}
.exf-scores{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.exf-score{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--ink-2)}
.exf-score .n{font-family:var(--ff-mono);font-weight:600;color:var(--primary);font-variant-numeric:tabular-nums}
.exf-alerts{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.exf-chip{font-family:var(--ff-mono);font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;display:inline-flex;align-items:center;gap:5px}
.exf-chip.crit{background:var(--err-soft);color:var(--err)}
.exf-chip.warn{background:var(--warn-soft);color:var(--warn)}
.exf-chip.info{background:var(--info-soft);color:var(--info)}
.exf-chip.ok{background:var(--ok-soft);color:var(--ok)}

/* ===== responsive (implementación web) ===== */
.cta-short{display:none}
@media(max-width:960px){
.container{padding:0 20px}
.pubnav{padding:12px 20px;gap:14px}
.nav-lk,.nav-login{display:none}
.burger{display:flex}
.hero{grid-template-columns:1fr;gap:30px;padding:44px 0 40px}
.htitle{font-size:36px;max-width:none}
.lead{max-width:none}
.tier-d{min-height:0}
.kpigrid{grid-template-columns:repeat(2,1fr)}
.sec-title{font-size:27px}
.sec-sub{font-size:15px}
.section{padding-block:44px}
.closing{padding-block:56px}
.closing h2{font-size:29px}
.closing p{font-size:15.5px}
.login{grid-template-columns:1fr;min-height:0}
.login-aside{padding:40px 24px;gap:28px}
.login-main{padding:36px 20px}
.footer-top{flex-direction:column}
}
@media(max-width:860px){
.exf-rail{position:static}
.exf-scroll{max-height:none}
}
@media(max-width:640px){
.htitle{font-size:31px}
.ctarow{flex-direction:column;align-items:stretch}
.ctarow .btn.lg{width:100%}
.pubnav .cta-full{display:none}
.pubnav .cta-short{display:inline}
.tkwrap{padding:18px 16px 20px}
.tk-nlab{display:none}
.tk-node.active .tk-nlab{display:-webkit-box;position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;max-width:none;font-size:10px}
.tk-track{margin:22px 2px 22px}
.tk-msg{font-size:23px}
}

/* ---------- páginas legales (no vienen del diseño) ---------- */
.rt-aviso .pg-home,.rt-condiciones .pg-home,.rt-privacidad .pg-home,.rt-cookies .pg-home{display:none}
.rt-aviso .pg-aviso{display:block}
.rt-condiciones .pg-condiciones{display:block}
.rt-privacidad .pg-privacidad{display:block}
.rt-cookies .pg-cookies{display:block}
.legal{max-width:780px;margin:0 auto;padding:56px 32px 72px}
.legal h1{font-family:var(--ff-display);font-weight:800;font-size:34px;letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
.legal .l-updated{font-family:var(--ff-mono);font-size:12px;color:var(--muted);margin:0 0 34px}
.legal h2{font-family:var(--ff-display);font-weight:700;font-size:19px;margin:30px 0 8px;color:var(--ink)}
.legal p{font-size:15px;line-height:1.7;color:var(--ink-2);margin:0 0 14px}
.legal p b{color:var(--ink)}
.legal a{font-weight:600}
@media (max-width:640px){.legal{padding:40px 20px 56px}.legal h1{font-size:27px}}