/* Fuentes autoalojadas: la landing se sirve sin ninguna peticion a un dominio
   de terceros. Mismos ficheros y subconjuntos (latin + latin-ext, hacen falta
   los dos para el castellano) que ya usa el producto en
   src/Reconocedor.Api/wwwroot/producto-retrolector.css. */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100% 125%;
    font-display: swap;
    src: url("fuentes/archivo-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100% 125%;
    font-display: swap;
    src: url("fuentes/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fuentes/space-grotesk-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fuentes/space-grotesk-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fuentes/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fuentes/ibm-plex-mono-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fuentes/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fuentes/ibm-plex-mono-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fuentes/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fuentes/ibm-plex-mono-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   RetroLector+ — hoja unica del sistema de diseno
   Retrofuturismo era espacial para un producto de reconocimiento de
   documentos estructurados. Modo claro.

   Es el mismo contenido que tokens/*.css del sistema, concatenado en un solo
   fichero para que se pueda soltar en cualquier proyecto:

       <link rel="stylesheet" href="retrolector.css">

   Todo es variable CSS. No hay clases de utilidad ni framework: los
   componentes leen los tokens. Las tres unicas clases que se declaran son
   .h-overline, .h-num y los resets de body, al final.
   ========================================================================= */

/* ===== FUENTES ======================================================== */
/* RetroLector+ webfonts — all three are Google Fonts, loaded from the Google CDN.
   SUBSTITUTION NOTE: no brand font files were provided. These are deliberate
   stand-ins chosen for the retro-futurist brief (see readme.md → Typography).
   - Archivo (wdth axis)  : wide "sci-fi paperback" display setting
   - Space Grotesk        : space-age geometric body sans
   - IBM Plex Mono        : cassette-futurism terminal mono for all data */

/* ===== COLORS ======================================================== */
:root {
  /* ---------- Base palette ---------- */
  /* Paper — warm, printed-brochure whites. Never pure #fff for page ground. */
  --paper-100: #fffdf9;
  --paper-200: #fbf6ed;
  --paper-300: #f4ecdd;
  --paper-400: #e9dcc6;

  /* Ink — warm near-blacks and greys (no cold slate greys in this system).
     ink-500 esta calculado, no elegido a ojo: es la tinta media mas clara que
     alcanza 4.5:1 sobre TODOS los fondos del sistema, incluidos los mas
     ajustados (orange-100 4.87:1, teal-100 4.94:1, paper-300 5.18:1). El
     #766c5d anterior fallaba en cuanto el texto salia del papel claro. */
  --ink-900: #191510;
  --ink-700: #443c31;
  --ink-500: #6b6151;
  --ink-300: #a89d8b;
  --ink-200: #d6cab4;
  --ink-100: #e7dcc9;

  /* Deep navy — the "night side of the planet". Sidebars, footers, slide grounds. */
  --navy-900: #0f1c2e;
  --navy-800: #16293f;
  --navy-700: #213852;
  --navy-hover: #22364d;   /* ghost-control hover on a navy ground */

  /* Atomic orange — the primary. 1960s brochure ink. */
  --orange-600: #b83a0e;
  --orange-500: #e24a17;
  --orange-400: #f2703c;
  --orange-100: #fbe1d4;
  /* Turquoise — the secondary. Googie tile, oxidised copper. */
  --teal-700: #0a6b67;
  --teal-500: #0e8f8a;
  --teal-300: #6cc3bd;
  --teal-100: #d6ecea;

  /* Sunburst amber + hot magenta — accents, used sparingly */
  --amber-600: #d9940f;
  --amber-500: #f2a81c;
  --amber-100: #fdeecd;
  --magenta-500: #d6246e;
  /* El unico vivo que quedaba imprimiendose como texto: 3.72:1 sobre su propio
     compañero suave. El vivo se queda para el filete y las barras. */
  --magenta-700: #9c1650;   /* 6.10:1 sobre magenta-100, 7.38:1 sobre papel */
  --magenta-100: #fad9e5;

  /* Signal blue — informational only */
  --blue-600: #2a5ea8;
  --blue-300: #9cb6dc;
  --blue-100: #dbe6f6;

  /* ---------- Semantic surfaces ---------- */
  --surface-page: var(--paper-200);
  --surface-card: var(--paper-100);
  --surface-sunken: var(--paper-300);
  --surface-raised: #ffffff;
  --surface-inverse: var(--navy-900);
  --surface-inverse-2: var(--navy-800);
  --surface-accent: var(--orange-500);
  --surface-accent-soft: var(--orange-100);
  --surface-secondary-soft: var(--teal-100);
  --surface-hover: var(--paper-300);
  --surface-selected: var(--orange-100);
  --surface-disabled: var(--paper-300);

  /* ---------- Rellenos solidos que llevan texto ----------
     --orange-500 y --teal-500 son colores GRAFICOS: filetes, barras, filos,
     resaltados, texto de gran tamano. Detras de texto pequeno se quedan en
     3.96:1 y 3.89:1, asi que cualquier relleno solido con etiqueta baja un paso.
     La marca sigue siendo #e24a17; lo que cambia es el fondo de los botones. */
  --fill-primary: var(--orange-600);          /* 5.66:1 con --text-on-accent */
  --fill-primary-hover: #8f2c08;
  --fill-secondary: var(--teal-700);          /* 6.24:1 */
  --fill-secondary-hover: #07514e;

  /* ---------- Semantic text ---------- */
  --text-title: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  /* --text-faint NO es para texto: a 10-11px se queda en 2.63:1 sobre papel.
     Usalo en filetes discontinuos, iconos decorativos y placeholders de forma. */
  --text-faint: var(--ink-300);
  --text-on-accent: #fffdf9;
  --text-on-inverse: var(--paper-200);
  --text-on-inverse-muted: #9fb0c4;
  --text-link: var(--orange-600);
  --text-link-hover: var(--ink-900);
  --text-accent: var(--orange-500);
  --text-secondary-accent: var(--teal-700);

  /* ---------- Lines ---------- */
  --line-hairline: var(--ink-100);
  --line-rule: var(--ink-200);
  --line-strong: var(--ink-900);
  --line-accent: var(--orange-500);
  --line-inverse: #2a3f59;

  /* ---------- Status ---------- */
  --status-ok: var(--teal-500);
  --status-ok-soft: var(--teal-100);
  --status-ok-text: var(--teal-700);
  --status-warn: var(--amber-500);
  --status-warn-soft: var(--amber-100);
  /* Warn and error need their own INK: the fill colour itself never clears 4.5:1
     on its soft companion, so text on those grounds uses these instead. */
  --status-warn-text: #8a5c00;  --status-error: #c8321d;
  --status-error-soft: #fadbd4;
  --status-error-text: #8e2314;
  --status-error-hover: #a02616;
  --status-info: var(--blue-600);
  --status-info-soft: var(--blue-100);
  --status-idle: var(--ink-300);
  --status-idle-soft: var(--paper-300);

  /* ---------- Document-recognition domain colors ----------
     Confidence ramp for extracted fields — read left to right. */
  --confidence-high: var(--teal-500);
  --confidence-mid: var(--amber-500);
  --confidence-low: var(--orange-500);
  --confidence-none: var(--ink-300);
  /* El numero va en tinta, no en el color de la barra: los cuatro vivos caen
     entre 2.02:1 y 4.02:1 sobre blanco, y es el dato que hay que poder leer. */
  --confidence-high-text: var(--teal-700);    /* 6.34:1 */
  --confidence-mid-text: var(--status-warn-text); /* 5.81:1 */
  --confidence-low-text: var(--orange-600);   /* 5.75:1 */
  --confidence-none-text: var(--ink-500);     /* 5.16:1 */
  --highlight-field: #ffe9a8;      /* OCR box fill over a scanned page */
  --highlight-field-line: var(--amber-500);
  --highlight-focus: #ffd3bf;
  --highlight-focus-line: var(--orange-500);
}

/* ===== TYPOGRAPHY ==================================================== */
:root {
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Display is always set WIDE — that expansion is the brand's signature. */
  --display-stretch: 118%;
  --display-stretch-max: 125%;

  /* Sizes (rem, 16px root) */
  --size-display-1: 4.5rem;   /* 72px — slide titles, hero numbers */
  --size-display-2: 3rem;     /* 48px */
  --size-display-3: 2.25rem;  /* 36px */
  --size-title-1: 1.75rem;    /* 28px — screen titles */
  --size-title-2: 1.3125rem;  /* 21px — card titles */
  --size-title-3: 1.0625rem;  /* 17px — section headers */
  --size-body: 0.9375rem;     /* 15px — default UI text */
  --size-body-lg: 1.0625rem;  /* 17px — prose, mobile body */
  --size-small: 0.8125rem;    /* 13px */
  --size-micro: 0.6875rem;    /* 11px — overlines, badges, table heads */

  --line-tight: 0.96;
  --line-snug: 1.15;
  --line-normal: 1.45;
  --line-loose: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Wide display type needs negative tracking; small caps need positive. */
  --track-display: -0.02em;
  --track-normal: 0;
  --track-overline: 0.16em;
  --track-mono-label: 0.08em;
  --track-numeric: 0.01em;
}

/* ===== SPACING ======================================================= */
:root {
  /* 4px base grid. Control paddings are deliberately generous —
     space-age hardware has fat bezels. */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 112px;

  /* Component sizing */
  --control-h-sm: 30px;
  --control-h-md: 38px;
  --control-h-lg: 46px;
  --control-pad-x-sm: 12px;
  --control-pad-x-md: 18px;
  --control-pad-x-lg: 26px;
  --touch-min: 44px;           /* mobile hit target floor */

  /* Layout */
  --card-pad: 20px;
  --card-pad-lg: 28px;
  --gutter: 20px;
  --page-pad: 32px;
  --page-pad-mobile: 20px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 60px;
  --content-max: 1240px;
  --prose-max: 68ch;
}

/* ===== RADIUS ======================================================== */
:root {
  /* Two radius families live side by side, and that tension IS the style:
     CAPSULE for anything you touch (Googie / atomic), and
     SQUARE-ish for anything that holds data (terminal / punch card). */
  --radius-capsule: 999px;
  --radius-data: 3px;      /* tables, code, mono chips */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;       /* cards */
  --radius-xl: 24px;       /* panels, modals */
  --radius-pod: 28px 28px 10px 28px;   /* asymmetric "instrument pod" card */
  --radius-arch: 999px 999px 16px 16px; /* Googie arch — hero + image tops */

  --border-hairline: 1px;
  --border-standard: 1.5px;
  --border-heavy: 2px;
  --border-chunky: 3px;
}

/* ===== EFFECTS ======================================================= */
:root {
  /* HARD shadows — offset, zero blur, ink or accent colored. The default
     "lift" in this system. Reads like mis-registered brochure printing. */
  --shadow-hard-1: 2px 2px 0 var(--ink-900);
  --shadow-hard-2: 4px 4px 0 var(--ink-900);
  --shadow-hard-accent: 4px 4px 0 var(--orange-500);
  --shadow-hard-teal: 4px 4px 0 var(--teal-500);

  /* SOFT shadows — warm, never neutral-grey. Used only for things that
     float above the page: menus, modals, toasts, dragged cards. */
  --shadow-soft-1: 0 1px 2px rgba(25, 21, 16, 0.06);
  --shadow-soft-2: 0 4px 14px rgba(25, 21, 16, 0.10);
  --shadow-soft-3: 0 18px 44px rgba(25, 21, 16, 0.16);

  /* Inset — dials, wells, progress tracks, input interiors */
  --shadow-inset: inset 0 1px 2px rgba(25, 21, 16, 0.10);

  /* Focus ring: always a double ring, paper gap between ink and accent. */
  --ring-focus: 0 0 0 2px var(--paper-100), 0 0 0 4px var(--orange-500);
  --ring-focus-inverse: 0 0 0 2px var(--navy-900), 0 0 0 4px var(--amber-500);

  /* Gradients — flat two-stop sunset ramps only. No mesh, no purple. */
  --grad-sunburst: linear-gradient(180deg, var(--amber-500) 0%, var(--orange-500) 100%);
  --grad-horizon: linear-gradient(180deg, var(--orange-400) 0%, var(--magenta-500) 100%);
  --grad-atmos: linear-gradient(180deg, var(--teal-500) 0%, var(--navy-900) 100%);
  --grad-paper-fade: linear-gradient(180deg, rgba(251,246,237,0) 0%, var(--paper-200) 70%);

  --scrim-inverse: rgba(15, 28, 46, 0.62);
  --blur-veil: blur(10px);
}

/* ===== MOTION ======================================================== */
:root {
  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --dur-scan: 1400ms;   /* indeterminate "scanning" loops */

  /* Swoop = the tailfin easing: fast out, long settle. Default for everything. */
  --ease-swoop: cubic-bezier(0.2, 0.9, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
  --ease-thunk: cubic-bezier(0.3, 1.5, 0.6, 1);  /* mechanical overshoot, toggles only */

  --transition-control: all var(--dur-fast) var(--ease-swoop);
  --transition-surface: all var(--dur-base) var(--ease-swoop);

  /* Press = translate into the page along the hard shadow, never scale. */
  --press-shift: translate(2px, 2px);
}

@keyframes retrolector-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@keyframes retrolector-blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}
@keyframes retrolector-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ===== BASE ========================================================== */
/* Minimal global resets. Components carry their own styling inline or via tokens. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--line-normal);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-display);
  line-height: var(--line-snug);
  color: var(--text-title);
  margin: 0;
}

a { color: var(--text-link); text-decoration: none; border-bottom: 1.5px solid var(--orange-100); }
a:hover { color: var(--text-link-hover); border-bottom-color: var(--ink-900); }

code, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.94em; }

/* Overline: the brochure caption. Mono, wide-tracked, uppercase. */
.h-overline {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Tabular numerals everywhere a number can change. */
.h-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

::selection { background: var(--highlight-field); color: var(--ink-900); }

:focus-visible { outline: none; box-shadow: var(--ring-focus); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =========================================================================
   landing.retrolector.es — capa propia de la pagina
   Todo lo de arriba es el sistema tal cual (design_handoff_retrolector/
   retrolector.css). De aqui para abajo, solo lo que la landing necesita.

   El sistema es de MODO CLARO unicamente (asi lo declara su propio README:
   "modo claro" a secas, sin tokens oscuros alternativos). Por eso esta hoja
   no define un juego de colores para prefers-color-scheme: dark — inventar
   uno no seria "respetar" el sistema, seria anadirle algo que no tiene. Las
   dos bandas oscuras que hay (cierre y aviso) son --surface-inverse fijo,
   igual que en el producto, no un modo alternativo.
   ========================================================================= */

html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

img, svg { max-width: 100%; height: auto; display: block; }

.envoltura {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-pad-mobile);
}
@media (min-width: 900px) {
  .envoltura { padding-inline: var(--page-pad); }
}

/* ---- saltar al contenido ---- */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink-900);
  color: var(--paper-200);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
}
.saltar:focus {
  left: var(--space-5);
  top: var(--space-5);
}

/* ---- hero ---- */
.hero {
  background: var(--surface-page);
  padding-block: var(--space-11) var(--space-12);
  position: relative;
  overflow: clip;
}
.hero-interior {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-9);
  align-items: center;
}
@media (min-width: 860px) {
  .hero-interior { grid-template-columns: 1.15fr 0.85fr; }
}

.marca {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1;
  color: var(--text-title);
  margin: 0 0 var(--space-7);
}
.marca span { color: var(--text-accent); }

.titular {
  font-size: clamp(2rem, 1.5rem + 2.2vw, var(--size-display-2));
  font-stretch: var(--display-stretch);
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.subtitular {
  font-size: var(--size-body-lg);
  color: var(--text-body);
  max-width: 46ch;
  margin: 0;
}
/* La lamina del hero: filete de tinta, radio de tarjeta y la sombra dura
   desplazada del sistema. Sin arco aqui: el arco se lo queda la cabecera de
   instalacion, que es donde el traspaso lo pide para esa imagen. */
.hero-marco {
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 520px;
  overflow: hidden;
  background: var(--surface-card);
  border: var(--border-standard) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard-2);
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
a.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h-lg);
  padding-inline: var(--control-pad-x-lg);
  min-height: var(--touch-min);
  border-radius: var(--radius-capsule);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--size-body);
  text-decoration: none;
  border: var(--border-standard) solid var(--line-strong);
  transition: var(--transition-control);
}
a.cta.cta-primaria {
  background: var(--fill-primary);
  color: var(--text-on-accent);
  border-color: var(--ink-900);
  box-shadow: var(--shadow-hard-1);
}
a.cta.cta-primaria:hover, a.cta.cta-primaria:active {
  background: var(--fill-primary-hover);
  color: var(--text-on-accent);
  border-color: var(--ink-900);
}
a.cta.cta-secundaria {
  background: var(--surface-card);
  color: var(--text-title);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-hard-1);
}
a.cta.cta-secundaria:hover, a.cta.cta-secundaria:active {
  background: var(--surface-hover);
  color: var(--text-title);
  border-color: var(--line-strong);
}
a.cta:active { transform: var(--press-shift); box-shadow: none; }

.hero-barrido {
  position: relative;
  height: 3px;
  margin-top: var(--space-8);
  max-width: 46ch;
  background: var(--line-rule);
  overflow: hidden;
  border-radius: var(--radius-data);
}
.hero-barrido::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--orange-500), transparent);
  animation: retrolector-sweep var(--dur-scan) var(--ease-in-out) infinite;
}

/* ---- secciones, comun ---- */
.seccion { padding-block: var(--space-12); }
.seccion + .seccion { border-top: var(--border-hairline) solid var(--line-hairline); }
.seccion-cabecera { max-width: 62ch; margin-bottom: var(--space-10); }
.seccion-cabecera h2 {
  font-size: clamp(1.5rem, 1.3rem + 1vw, var(--size-display-3));
  font-stretch: var(--display-stretch);
  margin-bottom: var(--space-4);
}
.seccion-cabecera p { color: var(--text-body); margin: 0; }

/* ---- que hace: bloques ---- */
.rejilla-bloques {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.bloque {
  background: var(--surface-card);
  border: var(--border-standard) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard-1);
  padding: var(--card-pad-lg);
}
.bloque-icono {
  width: auto;
  height: 40px;
  max-width: 100%;
  color: var(--text-accent);
  margin-bottom: var(--space-5);
}
.bloque h3 {
  font-size: var(--size-title-2);
  font-stretch: var(--display-stretch);
  margin-bottom: var(--space-3);
}
.bloque p { margin: 0; color: var(--text-body); font-size: var(--size-body); }
.bloque .h-overline { display: block; margin-top: var(--space-4); }

/* ---- fondo geometrico de seccion ----
   El traspaso es tajante: una pieza de ilustraciones/fondos/ va "una por
   pantalla, nunca dos", y nunca en la misma vista que una ilustracion de
   escena, porque son dos lenguajes de escenografia y juntos no se lee
   ninguno. Por eso la rampa de sol, que antes iba detras del hero, baja a la
   unica seccion de papel que no lleva imagen. */
.seccion-con-fondo { position: relative; overflow: clip; }
.seccion-fondo {
  position: absolute;
  inset: auto 0 -22% 50%;
  transform: translateX(-50%);
  width: min(980px, 130%);
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}
.seccion-con-fondo > .envoltura { position: relative; z-index: 1; }

/* ---- cita ---- */
.cita {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-radius: var(--radius-xl);
  padding: var(--card-pad-lg);
  margin: var(--space-10) 0 0;
  max-width: 64ch;
}
.cita p {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: clamp(1.15rem, 1rem + 0.8vw, var(--size-title-1));
  margin: 0 0 var(--space-4);
  color: var(--text-on-inverse);
}
.cita p:last-child { margin-bottom: 0; }
.cita cite {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  color: var(--text-on-inverse-muted);
  letter-spacing: var(--track-mono-label);
}

/* ---- como lo lee: banda azul noche ---- */
.banda {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  padding-top: var(--space-12);
}
.banda-interior {
  display: grid;
  gap: var(--space-9);
  padding-bottom: var(--space-12);
}
@media (min-width: 860px) {
  .banda-interior { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
}
.banda h2 {
  color: var(--text-on-inverse);
  font-size: clamp(1.5rem, 1.3rem + 1vw, var(--size-display-3));
  font-stretch: var(--display-stretch);
  margin-bottom: var(--space-4);
}
.banda h3 {
  color: var(--text-on-inverse);
  font-size: var(--size-title-3);
  font-stretch: var(--display-stretch);
  margin-bottom: var(--space-2);
}
/* El antetitulo hereda --text-muted, que es tinta de papel: sobre azul noche se
   queda en 2.82:1. En banda oscura va en ambar, que es lo que ya hace el
   marcador del pie, y ahi da 8.48:1. */
.banda .h-overline { display: block; color: var(--amber-500); margin-bottom: var(--space-4); }
.banda p { margin: 0; color: var(--text-on-inverse); }
.banda-entrada { font-size: var(--size-body-lg); max-width: 34ch; }
.lista-banda { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-7); }
.lista-banda li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); }
.lista-banda .marcador {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-capsule);
  background: var(--amber-500);
  margin-top: 0.5em;
}
/* La banda ancha va a sangre de lado a lado, recortada por el centro alto para
   no perder ni la fila de paneles ni la figura. */
.banda-tira img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  object-position: center 38%;
  border-top: var(--border-heavy) solid var(--line-inverse);
}

/* ---- factura o ticket ---- */
.rejilla-tipos {
  display: grid;
  gap: var(--space-9);
  align-items: start;
}
@media (min-width: 860px) {
  .rejilla-tipos { grid-template-columns: 0.72fr 1.28fr; align-items: center; }
}
/* Tarjeta a sangre: la imagen llena la tarjeta hasta el filete, sin margen de
   papel por dentro. Es el sitio que el traspaso da a esta ilustracion. */
.tarjeta-sangre {
  margin: 0;
  overflow: hidden;
  background: var(--surface-card);
  border: var(--border-standard) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard-2);
}
.rejilla-tipos > div > p { color: var(--text-body); margin: 0 0 var(--space-5); }
.rejilla-tipos > div > p:last-child { margin-bottom: 0; }

/* ---- instalacion ---- */
.rejilla-instalacion {
  display: grid;
  gap: var(--space-9);
}
@media (min-width: 860px) {
  .rejilla-instalacion { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}
/* La cabecera en arco: es el sitio que el traspaso da a esta imagen
   ("cabecera en arco, dominio: instrumento"), y el radio sale tal cual de
   --radius-arch, que el sistema define para los remates de imagen. */
.marco-arco {
  margin: 0 0 var(--space-8);
  max-width: 420px;
  overflow: hidden;
  background: var(--surface-card);
  border: var(--border-standard) solid var(--line-strong);
  border-radius: var(--radius-arch);
  box-shadow: var(--shadow-hard-2);
}
.marco-arco img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 62%; }

.lista-instalacion { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-6); }
.lista-instalacion li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); }
.lista-instalacion .marcador {
  width: 8px; height: 8px; border-radius: var(--radius-capsule);
  background: var(--teal-500); margin-top: 0.5em;
}
.lista-instalacion h3 { font-size: var(--size-title-3); font-stretch: var(--display-stretch); margin-bottom: var(--space-2); }
.lista-instalacion p { margin: 0; color: var(--text-body); }

.nota-maquina {
  margin-top: var(--space-8);
  border: var(--border-heavy) solid var(--teal-700);
  background: var(--surface-secondary-soft);
  border-radius: var(--radius-md);
  padding: var(--card-pad);
}
.nota-maquina .h-overline { display: block; color: var(--text-secondary-accent); margin-bottom: var(--space-3); }
.nota-maquina p { margin: 0; color: var(--ink-900); font-size: var(--size-body); }

/* ---- contacto / cierre ---- */
.pie {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  padding-block: var(--space-12);
}
.pie h2 { color: var(--text-on-inverse); margin-bottom: var(--space-4); }
.pie .subtitular { color: var(--text-on-inverse-muted); }

.marcador-contacto {
  margin-top: var(--space-8);
  border: var(--border-heavy) dashed var(--amber-500);
  border-radius: var(--radius-lg);
  padding: var(--card-pad-lg);
  max-width: 56ch;
}
.marcador-contacto .h-overline { color: var(--amber-500); display: block; margin-bottom: var(--space-3); }
.marcador-contacto p { margin: 0; color: var(--text-on-inverse); font-size: var(--size-body-lg); }

.pie-dominios {
  margin-top: var(--space-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--size-small);
  color: var(--text-on-inverse-muted);
}
.pie-legal {
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: var(--border-hairline) solid var(--line-inverse);
  font-size: var(--size-micro);
  color: var(--text-on-inverse-muted);
  max-width: 62ch;
}