/* Rune 13 — dirección «obra-en-laminas» · styles.css (una sola hoja; mobile-first)
   Tokens: solo brand/tokens.css. Derivados declarados en SYSTEM.md (color-mix / alfa). Sin hex nuevo (G-04, TS-10). */
@import url('brand/tokens.css');

:root {
  /* derivados (SYSTEM.md §1) */
  --ink-15: color-mix(in srgb, var(--r13-ink) 15%, transparent);
  --ink-25: color-mix(in srgb, var(--r13-ink) 25%, transparent);
  --ink-70: color-mix(in srgb, var(--r13-ink) 70%, transparent);
  --white-80: color-mix(in srgb, var(--r13-white) 80%, transparent);
  --white-18: color-mix(in srgb, var(--r13-white) 18%, transparent);
  --shadow-1: 0 1px 0 var(--ink-15);
  --teal-hover: color-mix(in srgb, var(--r13-teal) 86%, var(--r13-navy));
  /* tipografía */
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Source Sans 3', 'Source Sans Pro', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* medidas */
  --gutter: 6vw;
  --hdr-h: 68px;
  --logo-h: 44px;
  --sp-blk: 64px;
  --sp-in: 24px;
  --z-hdr: 20;
  --z-menu: 30;
  --z-skip: 50;
  /* motion (SYSTEM.md §1) */
  --dur: 280ms;
  --dur-menu: 240ms;
  --dur-hdr: 200ms;
  --dur-ui: 160ms;
  --dur-press: 120ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}
@media (min-width: 1024px) {
  :root { --hdr-h: 80px; --logo-h: 48px; --sp-blk: 96px; --gutter: 6vw; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scrollbar-color: var(--r13-navy) var(--r13-surface); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip;
  background: var(--r13-white); color: var(--r13-ink);
  font: 400 17px/1.55 var(--f-text);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) { body { font-size: 18px; } }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Foco: anillo del color que contrasta ≥3:1 con el suelo REAL — navy sobre blanco/surface, teal sobre navy, blanco sobre foto (TS-01) */
:focus-visible { outline: 2px solid var(--r13-navy); outline-offset: 2px; }
.hdr:not(.is-solid) :focus-visible { outline-color: var(--r13-white); }
body.menu-open .hdr :focus-visible, .hdr-nav.is-open :focus-visible, .ftr :focus-visible, .close-band :focus-visible { outline-color: var(--r13-teal); }
[id] { scroll-margin-top: calc(var(--hdr-h) + 8px); }
.skip {
  position: absolute; top: 8px; left: 8px; z-index: var(--z-skip);
  display: inline-flex; align-items: center; height: 48px; padding: 0 18px;
  background: var(--r13-navy); color: var(--r13-white); font-weight: 600; text-decoration: none; border-radius: 4px;
  transform: translateY(-200%); transition: transform var(--dur-press);
}
.skip:focus { transform: translateY(0); }
.wrap { padding-inline: var(--gutter); }
.narrow { max-width: 42em; }
.nb { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

/* ---------- tipografía ---------- */
.h2 { font: 400 26px/1.2 var(--f-display); letter-spacing: -0.005em; color: var(--r13-ink); }
.h3 { font: 400 20px/1.3 var(--f-display); color: var(--r13-ink); }
.ident { font: 400 28px/1.18 var(--f-display); letter-spacing: -0.01em; color: var(--r13-ink); }
.lead { font-size: 19px; line-height: 1.55; max-width: 34em; }
.copy { max-width: 33em; }
.small { font-size: 15px; color: var(--ink-70); }
@media (min-width: 1024px) {
  .h2 { font-size: 34px; }
  .h3 { font-size: 21px; }
  .ident { font-size: 40px; }
  .lead { font-size: 21px; }
}
.mark { display: inline-block; width: 8px; height: 8px; background: var(--r13-green); margin-right: 14px; vertical-align: middle; transform: translateY(-3px); }

/* ---------- botones y enlaces ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 4px; border: 2px solid transparent;
  font: 600 16px/1 var(--f-text); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-ui), color var(--dur-ui), border-color var(--dur-ui), transform var(--dur-press) var(--ease);
}
.btn-primary, .btn-hire { background: var(--r13-teal); border-color: var(--r13-teal); color: var(--r13-navy); }
.btn-secondary { background: transparent; border-color: var(--r13-navy); color: var(--r13-navy); }
.btn[disabled] { cursor: progress; }
.btn-primary[disabled] { background: var(--teal-hover); border-color: var(--teal-hover); color: var(--r13-navy); }  /* «Sending…» sin alfa: navy sobre teal-hover (G-30, TS-01) */
.btn:active, .chips a:active { transform: scale(.98); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 28px; }
.arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; color: var(--r13-navy); text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--r13-teal);
}
.arrow svg { width: 18px; height: 18px; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chips a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--ink-25); border-radius: 24px; font-weight: 600; font-size: 16px; text-decoration: none; color: var(--r13-ink);
  text-wrap: balance;
  transition: border-color var(--dur-ui), transform var(--dur-press) var(--ease);
}
.ledger > li { padding: 18px 0; border-top: 1px solid var(--ink-15); }
.ledger > li:last-child { border-bottom: 1px solid var(--ink-15); }
.ledger .h3 { margin-bottom: 4px; }
.ledger p { max-width: 33em; }
.ledger--num .num { display: inline; margin-right: 10px; }   /* mismo par numeral + rótulo que .proc-step (G-16) */
.ledger--num .h3 { display: inline; }
.ledger--num li > p { margin-top: 4px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .btn-hire:hover { background: var(--teal-hover); border-color: var(--teal-hover); }
  .btn-secondary:hover { background: var(--r13-navy); color: var(--r13-white); }
  .arrow:hover { box-shadow: inset 0 -2px 0 var(--r13-navy); }
  .chips a:hover { border-color: var(--r13-navy); }
  .seg .btn[aria-pressed="false"]:hover { border-color: var(--r13-navy); background: var(--r13-surface); }
  .ftr-list a:hover, .ftr-contact a:hover, .ftr-bottom a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* ---------- header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-hdr);
  height: var(--hdr-h); color: var(--r13-white);
  background: transparent; box-shadow: none;
  transition: background-color var(--dur-hdr), color var(--dur-hdr), box-shadow var(--dur-hdr);
}
.hdr-in { display: flex; align-items: center; gap: 12px; height: 100%; padding-inline: 5vw; }
.hdr-logo { position: relative; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; height: var(--logo-h); flex: none; }
.hdr-logo img { height: var(--logo-h); width: auto; transition: opacity var(--dur-hdr); }
.hdr-logo-light { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; }   /* cruce de logos en sincronía con el color de la barra (G-35) */
.hdr.is-solid { background: var(--r13-white); color: var(--r13-navy); box-shadow: var(--shadow-1); }
.hdr.is-solid .hdr-logo-dark { opacity: 0; }
.hdr.is-solid .hdr-logo-light { opacity: 1; }
.hdr-menu {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px;
  background: transparent; border: 0; border-radius: 4px; font-weight: 600; font-size: 16px; cursor: pointer; color: inherit;
}
.hdr-menu { order: 2; margin-left: auto; }   /* orden visual móvil = orden DOM: logo · Menu · Hire Talent (2.4.3) */
.btn-hire { order: 3; min-height: 44px; padding: 0 16px; font-size: 15px; }
.hdr-nav { order: 4; }
/* panel móvil: abre BAJO la barra real (logo y «Hire Talent» siguen a la vista; el botón «Menu» pasa a «Close») */
.hdr-nav {
  position: fixed; inset: var(--hdr-h) 0 0 0; z-index: var(--z-menu);
  background: var(--r13-navy); color: var(--r13-white);
  padding: 8px 5vw 32px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: transform var(--dur-menu) var(--ease), opacity var(--dur-menu) var(--ease), visibility 0s linear var(--dur-menu);
}
.hdr-nav.is-open { transform: none; opacity: 1; visibility: visible; transition: transform var(--dur-menu) var(--ease), opacity var(--dur-menu) var(--ease), visibility 0s; }
.hdr-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.hdr-list a {
  display: flex; align-items: center; min-height: 56px; padding: 0 4px;
  font: 400 30px/1.1 var(--f-display); text-decoration: none; color: var(--r13-white);
  border-bottom: 1px solid var(--white-18);
}
.hdr-list a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--r13-teal); padding-left: 14px; }
body.menu-open { position: fixed; inset: 0; overflow: hidden; }   /* iOS ignora overflow:hidden solo; site.js conserva scrollY */
body.menu-open .hdr { background: var(--r13-navy); color: var(--r13-white); box-shadow: none; }
body.menu-open .hdr .hdr-logo-light { opacity: 0; }
body.menu-open .hdr .hdr-logo-dark { opacity: 1; }
@media (min-width: 1024px) {
  .hdr-menu { display: none; }
  .hdr-nav {
    position: static; inset: auto; transform: none; opacity: 1; visibility: visible; background: transparent; color: inherit;
    padding: 0; overflow: visible; order: 2; margin-left: auto; transition: none;
  }
  .hdr-list { flex-direction: row; gap: 4px; margin: 0; }
  .hdr-list a {
    min-height: 44px; padding: 0 14px; font: 600 16px/1 var(--f-text); color: inherit; border: 0;
    box-shadow: inset 0 -2px 0 transparent; transition: box-shadow var(--dur-ui);
  }
  .hdr-list a[aria-current="page"], .hdr-list a[aria-current="page"]:hover { box-shadow: inset 0 -2px 0 var(--r13-teal); padding-left: 14px; }
  .hdr.is-solid .hdr-list a[aria-current="page"], .hdr.is-solid .hdr-list a[aria-current="page"]:hover { box-shadow: inset 0 -2px 0 var(--r13-navy); }   /* estado ≥3:1 sobre barra blanca (1.4.11) */
  .btn-hire { order: 3; margin-left: 12px; min-height: 48px; padding: 0 22px; font-size: 16px; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .hdr-list a:hover { box-shadow: inset 0 -2px 0 currentColor; }
}

/* ---------- hero (G-108: foto a sangre, capa 0, header + UN titular) ---------- */
.hero {
  position: sticky; top: 0; z-index: 0;
  --hero-h: 90svh;   /* foto ×0,9 en alto (cliente, 2026-10-08); en ancho sigue a sangre: encogerla dejaría franjas */
  height: var(--hero-h); min-height: var(--hero-h); overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos-m, 50% 50%);
}
.hero-h1 {
  position: absolute; left: 6vw; top: calc(var(--h1-top-m, .14) * var(--hero-h));
  width: calc(var(--h1-w-m, .88) * 100vw); max-width: calc(100vw - 12vw);
  color: var(--r13-white);
  font: 400 28px/1.15 var(--f-display); font-size: var(--h1-size-m, 28px); font-stretch: 87.5%; letter-spacing: -0.005em;
  text-wrap: balance;
}
.hero-h1 br { display: none; }
.hero-h1--keepbr br { display: initial; }   /* dictamen B G-36: Home y About parten el H1 tras la primera oración también en móvil */
@media (min-width: 1024px) {
  .hero-img { object-position: var(--pos-d, 50% 50%); }
  .hero-h1 {
    left: calc(var(--h1-left-d, .06) * 100vw);
    top: calc(var(--h1-top-d, .14) * var(--hero-h));
    width: calc(var(--h1-w-d, .62) * 100vw); max-width: calc(var(--h1-w-d, .62) * 100vw);
    font-weight: 300; font-size: 56px; font-stretch: 100%; line-height: 1.1; text-wrap: initial;
  }
  .hero-h1 br { display: initial; }
}
main { display: block; }
main > *:not(.hero) { position: relative; z-index: 1; background: var(--r13-white); }

/* ---------- bloques ---------- */
.blk { padding-block: var(--sp-blk); }
.blk--flush { padding-bottom: 0; }
.blk--flush-both { padding-block: 0; }
.blk-intro { padding-top: 48px; }
.blk-intro .lead { margin-top: 20px; }
.lam-fig { position: relative; overflow: hidden; margin: 0; }
.lam-fig img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-m, 50% 50%); }
.lam-fig { width: 90%; margin-inline: auto; }   /* fotos ×0,9 (cliente, 2026-10-08): el aspect-ratio baja el alto igual; a sangre quedan centradas, a 5vw por lado como el header */
.r32 { aspect-ratio: 3 / 2; }
.r43 { aspect-ratio: 4 / 3; }
.r169 { aspect-ratio: 16 / 9; }
.r45 { aspect-ratio: 4 / 5; }
.r34 { aspect-ratio: 3 / 4; }
.r21 { aspect-ratio: 4 / 5; }              /* banda: 4:5 en móvil, 2:1 en desktop */
.lam-pie { padding: var(--sp-in) var(--gutter) 0; }
.lam-pie > .h2 { margin-bottom: 16px; }
.band-pie > .h2, .blk.wrap > .h2:not(.blk-title) { margin-bottom: 16px; }
.lam-pie .copy + .ctas { margin-top: 24px; }
.lam-pie .arrow { margin-top: 18px; }
.pie-note { margin-top: 16px; }                 /* toda nota bajo copy, ledger o chips del pie */
.copy.pie-note { color: var(--ink-70); }        /* frase de valor: cuerpo pleno, un tono abajo */
.pie-ctas { margin-top: 24px; }
.blk-title { margin-bottom: 28px; }
.ind-item + .ind-item { margin-top: 48px; }
.ind-pie { padding: var(--sp-in) var(--gutter) 0; }
.ind-pie .h3 { margin-bottom: 10px; }
.proc { display: grid; gap: 40px; }
.proc-row { display: grid; gap: 40px; }
.proc-step { margin: 0; }
.proc-step figcaption { padding: 14px var(--gutter) 0; }
.num { font: 400 20px/1.2 var(--f-display); font-variant-numeric: tabular-nums; color: var(--r13-navy); margin-right: 10px; }
.proc-step .h3 { display: inline; }
.proc-step p { margin-top: 6px; max-width: 33em; }
.band-pie { padding: var(--sp-in) var(--gutter) 0; }
.fam-head { margin-top: var(--sp-blk); margin-bottom: 24px; }
.fam-head .h3 { color: var(--ink-70); }
.cross { display: grid; gap: 20px 40px; margin-top: 48px; }
.cross p { margin: 0 0 2px; }
@media (min-width: 768px) { .cross { grid-template-columns: 1fr 1fr; } }
.close-band { background: var(--r13-navy); color: var(--r13-white); padding: 56px var(--gutter); border-bottom: 1px solid var(--white-18); }
.close-band--after-band { margin-top: var(--sp-blk); }
.close-band .h2 { color: var(--r13-white); max-width: 22em; }
.close-band .btn-primary { margin-top: 24px; }
@media (min-width: 1024px) {
  .lam { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 4vw; align-items: end; }
  .lam--5 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .lam--right { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .lam .lam-fig { align-self: end; margin: 0 0 0 auto; min-height: 90%; }   /* lámina ×0,9: conserva el borde del canal y el pie a ras de su base; si el pie es más alto, la foto mide el 90 % de él (cover), nunca más ancha */
  .lam .lam-pie { padding: 0 calc(var(--gutter) / 2) 8px 0; }
  .lam--right .lam-fig { order: 2; margin: 0 auto 0 0; }
  .lam.lam--right .lam-pie { order: 1; padding: 0 0 8px calc(var(--gutter) / 2); }
  .lam.lam--5 .lam-pie { padding-right: var(--gutter); }
  .ind-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4vw; }
  .ind-item + .ind-item { margin-top: 0; }
  .ind-item:first-child .ind-pie { padding: var(--sp-in) 0 0 var(--gutter); }
  .ind-item:last-child .ind-pie { padding: var(--sp-in) var(--gutter) 0 0; }
  .ind-pie p { max-width: 30em; }
  .ind-item:first-child .lam-fig, .proc-step:first-child:not(:last-child) > .lam-fig { margin-right: 0; }   /* rejillas: cada foto conserva el borde del canal y el aire cae afuera; */
  .ind-item:last-child .lam-fig, .proc-step:last-child:not(:first-child) > .lam-fig { margin-left: 0; }     /* la del medio y la fila única quedan centradas */
  .r21 { aspect-ratio: 2 / 1; }
  .lam-fig img { object-position: var(--pos-d, 50% 50%); }   /* SYSTEM §4: ≥1024 centro salvo --pos-d declarada */
  .proc { gap: 24px; }
  .proc-row { gap: 24px; align-items: start; }
  .proc-row--a { grid-template-columns: 1.778fr 1.333fr; }
  .proc-row--a2 { grid-template-columns: 1.333fr 1.778fr; }  /* 4:3 + 16:9 (espejo de --a): alturas iguales */
  .proc-row--b { grid-template-columns: 1.5fr 1.333fr; }
  .proc-row--c { grid-template-columns: .75fr 1.5fr; }
  .proc-row--d { grid-template-columns: 1fr; }
  .proc-row--e { grid-template-columns: 1.333fr 1.5fr 1.333fr; }
  .proc-step figcaption { padding-top: 16px; }
  .close-band { padding: 72px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 40px; }
  .close-band .btn-primary { margin-top: 0; flex: none; }
}

/* ---------- formularios (contrato shared/forms.js; CONVERSION §3) ---------- */
.form-blk { background: var(--r13-surface); }
.form-blk--after-band { margin-top: var(--sp-blk); padding-block: var(--sp-blk); }
.form-head { max-width: 40em; margin-bottom: 32px; }
.form-head .h2 { margin-bottom: 12px; }
.form-head .r13-hint { margin-top: 16px; }
.form-head .r13-hint + .r13-hint { margin-top: 8px; }
.form-head .r13-hint a { color: var(--r13-ink); }
.r13-form { max-width: 760px; }
.r13-grid { display: grid; gap: 20px; }
.r13-field { display: flex; flex-direction: column; gap: 6px; }
.r13-field label { font-weight: 600; font-size: 16px; }
.r13-field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }   /* label + Dictate en la cabecera del campo (G-45) */
.r13-opt { font-weight: 400; color: var(--ink-70); }
.r13-field input:not([type=file]), .r13-field select, .r13-field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font: 400 16px/1.4 var(--f-text); color: var(--r13-ink);
  background: var(--r13-white); border: 1px solid var(--ink-25); border-radius: 4px;
}
.r13-field textarea { min-height: 150px; resize: vertical; }
.r13-field input::placeholder, .r13-field textarea::placeholder { color: var(--ink-70); opacity: 1; }
.r13-field input:focus-visible, .r13-field select:focus-visible, .r13-field textarea:focus-visible { outline: 2px solid var(--r13-navy); outline-offset: 1px; border-color: var(--r13-navy); }
.r13-field select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
.r13-select { position: relative; }
.r13-select::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); pointer-events: none;
  background: var(--r13-ink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 8l5 5 5-5'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 8l5 5 5-5'/></svg>") center / contain no-repeat;
}
.r13-hint { font-size: 15px; color: var(--ink-70); }
.r13-field.has-error input, .r13-field.has-error select, .r13-field.has-error textarea, .r13-field.has-error .file-ctl { border: 1px solid var(--r13-ink); box-shadow: inset 0 0 0 1px var(--r13-ink); }
.r13-field-error { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; font-weight: 600; color: var(--r13-ink); }
.r13-field-error::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px;
  background: var(--r13-ink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><circle cx='9' cy='9' r='7.25'/><path d='M9 5.5v4.5M9 12.5h.01'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><circle cx='9' cy='9' r='7.25'/><path d='M9 5.5v4.5M9 12.5h.01'/></svg>") center / contain no-repeat;
}
.r13-hp { position: absolute; width: 0; height: 0; margin: 0; padding: 0; border: 0; font-size: 16px; opacity: 0; overflow: hidden; pointer-events: none; }
.r13-field--long { position: relative; }
.r13-mic {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 44px; padding: 0 14px; margin: 0;
  background: var(--r13-white); border: 1px solid var(--ink-25); border-radius: 4px; font-weight: 600; font-size: 15px; cursor: pointer;
}
.r13-mic svg { width: 18px; height: 18px; }
.r13-mic[aria-pressed="true"] { border-color: var(--r13-navy); outline: 2px solid var(--r13-navy); outline-offset: 1px; }
.file-ctl {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 4px 4px 4px;
  background: var(--r13-white); border: 1px solid var(--ink-25); border-radius: 4px; touch-action: manipulation;
}
.file-ctl input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.file-ctl:focus-within { outline: 2px solid var(--r13-navy); outline-offset: 1px; }
.file-btn { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 4px; background: var(--r13-navy); color: var(--r13-white); font-weight: 600; font-size: 15px; white-space: nowrap; }
.file-name { font-size: 15px; color: var(--ink-70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r13-form button[type=submit] { margin-top: 32px; }
.r13-consent { margin-top: 16px; font-size: 15px; color: var(--ink-70); max-width: 40em; }
.r13-consent a { color: var(--r13-ink); }
.r13-form-status { margin-top: 16px; font: 400 20px/1.35 var(--f-display); max-width: 30em; }
.r13-form-status:empty { display: none; }
.r13-form.is-error .r13-form-status { font: 600 16px/1.5 var(--f-text); }
.r13-form.is-success .r13-form-status { font-size: 24px; }
.r13-form.is-notice .r13-form-status { font-size: 22px; max-width: 26em; }
.r13-form.is-notice .r13-form-status a { color: var(--r13-ink); white-space: nowrap; }
@media (min-width: 768px) {
  .r13-grid { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  .r13-field--long, .r13-field--wide { grid-column: 1 / -1; }
}

/* ---------- footer ---------- */
.ftr { position: relative; z-index: 1; background: var(--r13-navy); color: var(--r13-white); padding: 56px var(--gutter) 40px; }
.ftr a { color: var(--r13-white); }
.ftr-top { display: grid; gap: 32px; }
.ftr-logo { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.ftr-logo img { height: 44px; width: auto; }
.ftr-ident { margin-top: 16px; font: 400 20px/1.3 var(--f-display); max-width: 20em; }
.ftr-posture { margin-top: 10px; color: var(--white-80); }
.ftr-h { font: 600 14px/1.3 var(--f-text); color: var(--white-80); margin-bottom: 8px; }
.ftr-list a, .ftr-contact a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; margin-left: -12px; text-decoration: none; }
.ftr-contact p { margin-top: 12px; }
.ftr-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--white-18); display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; font-size: 15px; }
.ftr-bottom a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.ftr-bottom .copy-line { margin-left: auto; }
@media (min-width: 768px) { .ftr-top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .ftr { padding-top: 72px; } }

/* ---------- páginas de texto (privacy / terms / 404) ---------- */
.doc { padding-top: calc(var(--hdr-h) + 48px); padding-bottom: var(--sp-blk); }
.doc .h1 { font: 400 34px/1.15 var(--f-display); margin-bottom: 12px; }
.doc .prose { max-width: 36em; margin-top: 32px; }
.doc .prose h2 { font: 400 24px/1.25 var(--f-display); margin: 40px 0 12px; }
.doc .prose p { margin: 0 0 14px; }
.doc .prose ul { list-style: disc; padding-left: 22px; margin: 0 0 14px; }
.doc .prose li { margin-bottom: 6px; }
.doc .prose table { border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: 16px; }
.doc .prose th, .doc .prose td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-top: 1px solid var(--ink-15); }
.doc .prose .table-wrap { overflow-x: auto; }
.doc .draft { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--ink-15); font-size: 15px; color: var(--ink-70); }
.doc .ph { box-shadow: inset 0 -2px 0 var(--r13-teal); font-weight: 600; white-space: nowrap; }
.doc .links-lead { margin-top: 32px; }
.doc .links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 8px; }
.doc-404 { min-height: calc(100svh - 360px); }
@media (min-width: 1024px) { .doc .h1 { font-size: 44px; } .doc .prose h2 { font-size: 26px; } }

/* ---------- contact selector ---------- */
.seg { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.seg .btn[aria-pressed="true"] { background: var(--r13-surface); border-color: var(--r13-navy); color: var(--r13-navy); box-shadow: inset 0 -3px 0 var(--r13-teal); }   /* seleccionado = lavado + subrayado teal de «actual» (G-09), no el tinte del hover */
.seg .btn[aria-pressed="false"] { background: transparent; border-color: var(--ink-25); color: var(--r13-navy); }
.contact-panels > section[hidden] { display: none; }
.direct { display: grid; gap: 20px; margin-top: 8px; }
.direct .h3 { margin-bottom: 4px; }
@media (min-width: 768px) { .direct { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

/* ---------- reveals (G-102: ≤400 ms, sin blur; G-35) ---------- */
html.js .rv { opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.js .rv.is-in { opacity: 1; transform: none; }
/* reduced-motion: menos y más suave, nunca cero (TS-01) */
@media (prefers-reduced-motion: reduce) {
  html.js .rv { transform: none; transition: opacity var(--dur-hdr) linear; }      /* fade puro, sin desplazamiento ni blur (G-102) */
  .hero { position: relative; }                                                    /* sin hero fijo: la página no pasa por encima */
  .skip { transition: none; }
  html { scroll-behavior: auto; }
  .btn, .chips a, .arrow, .hdr, .hdr-list a, .hdr-logo img { transition-duration: var(--dur-press); }   /* el color sigue cruzando, más corto */
  .btn:active, .chips a:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1023px) {
  .hdr-nav { transform: none; opacity: 0; transition: opacity var(--dur-ui) linear, visibility 0s linear var(--dur-ui); }   /* slide → crossfade corto */
  .hdr-nav.is-open { opacity: 1; transition: opacity var(--dur-ui) linear, visibility 0s; }
}
@media (pointer: coarse) {
  .btn, .btn-hire, .hdr-menu, .hdr-logo, .ftr-logo, .chips a, .arrow, .hdr-list a, .ftr-list a, .ftr-contact a, .ftr-bottom a, .r13-mic, .file-ctl { min-height: 44px; }
  .hdr-logo, .ftr-logo { min-width: 44px; }
}