/* ==========================================================================
   Make Flow IA — Digital Systems & AI Lab
   tokens.css · Sistema de diseño v1.0 (FASE 7 · Dirección A.1 «Retícula de 8»)
   Orden: tokens → base → layout → componentes → utilidades.
   Todo hex, px y ms vive en :root. Eje vertical: solo 8/16/24/32/48/64/96.
   Los hairlines se restan del padding contiguo con calc(var(--space-N) - var(--line)).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light;

  /* Superficies y tinta (cada color-mix va precedido de su hex aplanado) */
  --color-paper: #f4f5f4;
  --color-surface: #eaecea;
  --color-ink: #16191a;
  --color-ink-2: #47494a;
  --color-ink-2: color-mix(in srgb, var(--color-ink) 78%, var(--color-paper));
  --color-ink-3: #595b5b;
  --color-ink-3: color-mix(in srgb, var(--color-ink) 70%, var(--color-paper));
  --color-ink-faint: #7a7c7c;
  --color-ink-faint: color-mix(in srgb, var(--color-ink) 55%, var(--color-paper));
  --color-line: #d0d2d1;
  --color-line: color-mix(in srgb, var(--color-ink) 16%, transparent);
  --color-line-soft: #e2e3e3;
  --color-line-soft: color-mix(in srgb, var(--color-ink) 8%, transparent);
  --color-hover-ink: #e4e6e5;
  --color-hover-ink: color-mix(in srgb, var(--color-ink) 7%, transparent);
  --color-active-ink: #d5d6d5;
  --color-active-ink: color-mix(in srgb, var(--color-ink) 14%, transparent);

  /* Acento — rampa 100–900, base = 600 */
  --color-accent-100: #e8f3f1;
  --color-accent-200: #cde5e1;
  --color-accent-300: #a8d0ca;
  --color-accent-400: #7db4ad;
  --color-accent-500: #4f958e;
  --color-accent-600: #1f6f6a;
  --color-accent-700: #185852;
  --color-accent-800: #12423e;
  --color-accent-900: #0d2f2c;
  --color-accent: var(--color-accent-600);
  --color-accent-text: var(--color-accent-700);
  --color-accent-hover: var(--color-accent-700);
  --color-accent-active: var(--color-accent-800);

  /* Banda (único campo pleno) */
  --color-field: var(--color-accent-900);
  --color-on-field: var(--color-paper);
  --color-on-field-2: #c1c9c8;
  --color-on-field-2: color-mix(in srgb, var(--color-paper) 78%, var(--color-field));
  --color-on-field-3: #afbab8;
  --color-on-field-3: color-mix(in srgb, var(--color-paper) 70%, var(--color-field));
  --color-on-field-kicker: var(--color-accent-300);
  --color-line-on-field: var(--color-accent-400);
  --color-line-strong-on-field: #809290;
  --color-line-strong-on-field: color-mix(in srgb, var(--color-paper) 50%, var(--color-field));
  --color-hover-paper: #1f3f3c;
  --color-hover-paper: color-mix(in srgb, var(--color-paper) 8%, var(--color-field));
  --color-active-paper: #324f4c;
  --color-active-paper: color-mix(in srgb, var(--color-paper) 16%, var(--color-field));

  /* Neutrales (reserva; solo 300 en uso) */
  --color-neutral-100: #f7f8f7; --color-neutral-200: #e9ebea; --color-neutral-300: #d5d8d6;
  --color-neutral-400: #b8bcba; --color-neutral-500: #999e9b; --color-neutral-600: #7a7f7d;
  --color-neutral-700: #5c605e; --color-neutral-800: #414443; --color-neutral-900: #2a2c2b;

  /* Semánticos */
  --color-danger: #9d4a3f;
  --color-warn: #9a7a2a;          /* solo bordes */
  --color-warn-text: #6b541c;
  --color-success: var(--color-accent-700);
  --color-selection: #b4cdcb;
  --color-selection: color-mix(in srgb, var(--color-accent) 30%, var(--color-paper));
  --color-focus: var(--color-accent);

  /* Prohibidos como texto sobre papel (auditoría): #6f7171 4.49 · #7a7c7c 3.84 ·
     #7a7f7d 3.72 · #999e9b 2.49 · #9a7a2a 3.70 · #4f958e 3.19 · #7db4ad 2.13 */

  /* Tipografía */
  --font-heading: "IBM Plex Sans Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  --text-display-3: 3.75rem;  --lh-display-3: 4rem;      /* 60/64 */
  --text-display-2: 3.25rem;  --lh-display-2: 3.5rem;    /* 52/56 */
  --text-h1: 2.5rem;          --lh-h1: 3rem;             /* 40/48 */
  --text-h2: 2rem;            --lh-h2: 2.5rem;           /* 32/40 */
  --text-h3: 1.5rem;          --lh-h3: 2rem;             /* 24/32 */
  --text-h4: 1.25rem;         --lh-h4: 1.5rem;           /* 20/24 */
  --text-h5: 1rem;            --lh-h5: 1.5rem;           /* 16/24 */
  --text-kicker: .8125rem;    --lh-kicker: 1rem;         /* 13/16 */
  --text-meta: .75rem;        --lh-meta: 1rem;           /* 12/16 */
  --text-lead: 1.25rem;       --lh-lead: 2rem;           /* 20/32 */
  --text-body: 1rem;          --lh-body: 1.5rem;         /* 16/24 */
  --text-small: .875rem;      --lh-small: 1.5rem;        /* 14/24 */
  --text-mono: .875rem;       --lh-mono: 1.5rem;         /* 14/24 */
  --text-quote: 2.25rem;      --lh-quote: 2.5rem;        /* 36/40 (≥720) */
  --text-quote-s: 1.75rem;    --lh-quote-s: 2rem;        /* 28/32 */
  --text-brand: 1.375rem;     --lh-brand: 1.5rem;        /* 22/24 */
  --text-btn: 1rem;           --lh-btn: 1.5rem;          /* 16/24 */

  --track-display: -.015em; --track-h1: -.01em; --track-h2: -.01em;
  --track-kicker: .08em; --track-meta-desc: .14em; --track-meta-num: .10em;
  --track-brand: .04em; --track-btn: .02em; --track-tag: .06em;

  --measure: 60ch; --measure-note: 48ch; --measure-quote: 36ch; --intro-max: 620px; --form-max: 690px;

  /* Espaciado (vertical: solo 8/16/24/32/48/64/96) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --section-y: var(--space-7);            /* 48 <480 · 64 ≥480 · 96 ≥720 */

  /* Bordes, radio, sombra, movimiento */
  --radius: 0;
  --line: 1px;
  --border: var(--line) solid var(--color-line);
  --border-soft: var(--line) solid var(--color-line-soft);
  --border-control: var(--line) solid var(--color-ink-faint);
  --shadow-menu: 0 4px 16px rgba(22, 25, 26, .16);
  --transition: 140ms ease;
  --z-header: 10; --z-menu: 20; --z-skip: 30;

  /* Layout y controles */
  --wrap: 1200px;
  --edge: clamp(20px, 5vw, 72px);
  --grid: repeat(12, minmax(0, 1fr));
  --gap: var(--space-4);                  /* 24 desde 880 */
  --control-h: 48px;
  --control-px: var(--space-4);
  --textarea-min: 96px;
  --header-h: 64px;

  /* Colgados de la cita: provisionales; sustituir por el valor medido (§3.10) */
  --hang-quote: -0.42em;
  --hang-dash: -0.62em;

  /* Medidas de detalle (nodo, tick, casilla, barra, anillo, anchos fijos) */
  --tick: 12px; --tick-half: 6px; --node-mask: 16px;
  --check: 20px; --check-dot: 10px; --check-offset: 2px;
  --bar: 2px; --ring: 2px; --underline: 1px; --underline-offset: 3px; --underline-offset-nav: 6px;
  --tag-h: 24px; --skip-hide: -100px;
  --btn-min: 120px; --btn-min-compact: 96px; --menu-min: 64px;
  --spec-num-w: 64px; --spec-label-w: 96px; --steps-num-w: 64px;
  --debug-line: rgba(31, 111, 106, .18);
}
@media (min-width: 480px) { :root { --section-y: var(--space-8); } }
@media (min-width: 720px) { :root { --section-y: var(--space-9); } }
@media (min-width: 880px) { :root { --gap: var(--space-5); } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; font-synthesis: none; -webkit-text-size-adjust: 100%; hyphens: manual; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink);
  font: 400 var(--text-body) / var(--lh-body) var(--font-body); text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
h1, h2, h3, h4, h5 { font-family: var(--font-heading); text-wrap: balance; }
h1 { font-weight: 500; font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--track-h1); }
h2 { font-weight: 600; font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); }
h3 { font-weight: 600; font-size: var(--text-h3); line-height: var(--lh-h3); }
h4 { font-weight: 600; font-size: var(--text-h4); line-height: var(--lh-h4); }
h5 { font-weight: 500; font-size: var(--text-h5); line-height: var(--lh-h5); }
p { text-wrap: pretty; max-width: var(--measure); }

/* Texto corrido justificado (decisión del fundador, 30-ago-2026): las líneas
   cierran parejas a derecha e izquierda, como en un documento impreso.
   La partición de palabras es obligatoria aquí: sin ella, justificar en columnas
   estrechas abre huecos entre palabras. El documento declara lang="es", así que
   el navegador parte con las reglas del español. */
main p, main li, main dd, main blockquote p, main figcaption, main td {
  text-align: justify; -webkit-hyphens: auto; hyphens: auto; }

/* No se justifica lo que va centrado, lo tabular, lo de una sola línea ni lo
   monoespaciado: ahí la justificación estorba en vez de ayudar. */
main .c-kicker, main .c-timeline__item p, main .c-timeline__doc, main .c-timeline__sub,
main .c-doc, main .c-sequence, main .c-doclist,
main .c-module__value, main .c-hours p, main .c-hours td, main pre, main code, main .c-tag,
main .c-quote, main .c-quote p, main .c-quote__cite, main .c-btn, main .c-link--arrow,
main td.c-spec__num, main td.c-spec__name {
  text-align: inherit; -webkit-hyphens: manual; hyphens: manual; }
strong, em { font-weight: 500; font-style: normal; }
img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
a { color: inherit; transition: color var(--transition), text-decoration-color var(--transition); }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; border-radius: var(--radius); }
:focus-visible { outline: var(--ring) solid var(--color-focus); outline-offset: var(--ring); }
::selection { background: var(--color-selection); color: var(--color-ink); }
table { border-collapse: collapse; }
table, .c-kicker, .c-nav, .c-timeline, .c-steps, .c-hours, .c-brand, .c-tag, .c-doc, .c-sequence, .c-doclist, code, pre {
  font-variant-numeric: tabular-nums lining-nums; }
.c-doc, .c-sequence, .c-doclist, code, pre { font-family: var(--font-mono); font-size: var(--text-mono); line-height: var(--lh-mono); }
pre { margin: 0; padding: calc(var(--space-4) - var(--line)) var(--space-4); background: var(--color-surface); border: var(--border); overflow-x: auto; }

/* Enlaces en texto corrido: siempre subrayados; el color no es el único indicador */
a:where(:not([class])), .c-link {
  color: var(--color-ink); text-decoration: underline; text-decoration-thickness: var(--underline);
  text-underline-offset: var(--underline-offset); text-decoration-color: var(--color-ink-faint); }
a:where(:not([class])):hover, .c-link:hover { color: var(--color-accent-text); text-decoration-color: var(--color-accent); }
a:where(:not([class])):active, .c-link:active { color: var(--color-accent-active); }
.c-link--arrow { font: 500 var(--text-h5) / var(--lh-h5) var(--font-heading); color: var(--color-accent-text); text-decoration: none; }
.c-link--arrow:hover { color: var(--color-accent-text); text-decoration: underline; text-decoration-thickness: var(--underline); text-decoration-color: currentColor; }
.c-link--arrow:active { color: var(--color-accent-active); }

/* Texto de apoyo y utilidades tipográficas */
.u-small { font-size: var(--text-small); line-height: var(--lh-small); }
.u-lead { font-size: var(--text-lead); line-height: var(--lh-lead); }
.u-ink-2 { color: var(--color-ink-2); }
.u-ink-3 { color: var(--color-ink-3); }
.c-subtitle { font: 500 var(--text-h4) / var(--lh-h4) var(--font-heading); color: var(--color-ink-3); }

/* ---------- 3. Layout ---------- */
.wrap { width: min(100% - 2 * var(--edge), var(--wrap)); margin-inline: auto; }
.c-grid { display: grid; grid-template-columns: var(--grid); gap: var(--gap); }
.c-table-wrap { overflow-x: auto; }   /* contenedor de toda tabla: el body nunca desplaza en horizontal */
.c-section { padding-block: var(--section-y); }
.c-hero { padding-block: var(--section-y); }
.c-hero__lead { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--color-ink-2); margin-top: var(--space-5); }
.c-hero .c-actions { margin-top: var(--space-6); }
.c-hero__note { color: var(--color-ink-3); margin-top: var(--space-5); }

/* Cabecera de sección en tres niveles: kicker → h2 → intro */
.c-section-head { margin-bottom: var(--space-6); }
.c-section-head__intro { color: var(--color-ink-2); max-width: var(--intro-max); margin-top: var(--space-4); }

/* Cabecera de página (interiores) */
.c-page-head { padding-block: var(--section-y) var(--space-7); }
.c-page-head__tagline { margin-top: var(--space-2); max-width: var(--measure); }
.c-page-head__intro { color: var(--color-ink-2); max-width: var(--intro-max); margin-top: var(--space-4); }
.c-page-head--inline { padding-block: 0; }
.c-principle { border: var(--border); padding: calc(var(--space-5) - var(--line)); max-width: var(--intro-max); margin-top: var(--space-6); }
.c-principle__text { font: 500 var(--text-h3) / var(--lh-h3) var(--font-heading); color: var(--color-ink); }
.c-principle__note { font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-ink-3); margin-top: var(--space-2); }

@media (min-width: 720px) {
  .c-hero h1 { font-size: var(--text-display-2); line-height: var(--lh-display-2); letter-spacing: var(--track-display); }
}
@media (min-width: 880px) {
  .c-section-head { margin-bottom: var(--space-7); }
}
@media (min-width: 1100px) {
  .c-hero h1 { font-size: var(--text-display-3); line-height: var(--lh-display-3); }
}

/* ---------- 4. Componentes ---------- */

/* 4.1 Enlace de salto */
.c-skip { position: absolute; left: var(--edge); top: var(--skip-hide); z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4); background: var(--color-paper); color: var(--color-ink);
  border: var(--line) solid var(--color-ink); font: 600 var(--text-btn) / var(--lh-btn) var(--font-heading); text-decoration: none; }
.c-skip:focus { top: var(--space-3); }

/* 4.2 Header: marca en dos líneas, nav numerada, menú móvil */
.c-header { position: relative; z-index: var(--z-header); background: var(--color-paper); border-bottom: var(--border);
  padding-block: var(--space-2) calc(var(--space-2) - var(--line)); }
.c-header__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: var(--control-h); }
.c-brand { display: block; color: var(--color-ink); text-decoration: none; font-family: var(--font-heading); }
.c-brand__name { display: block; font-weight: 600; font-size: var(--text-brand); line-height: var(--lh-brand);
  text-transform: uppercase; letter-spacing: var(--track-brand); transition: color var(--transition); }
.c-brand__desc { display: block; font-weight: 500; font-size: var(--text-meta); line-height: var(--lh-meta);
  text-transform: uppercase; letter-spacing: var(--track-meta-desc); color: var(--color-ink-3); white-space: nowrap; }
.c-brand:hover .c-brand__name { color: var(--color-accent-text); }
.c-header__mobile { display: flex; align-items: center; gap: var(--space-4); }
.c-header__wa { display: none; }
.c-menu-btn { min-height: var(--control-h); min-width: var(--menu-min); padding: 0 var(--space-3);
  border: var(--border-control); background: transparent; color: var(--color-ink); cursor: pointer;
  font: 600 var(--text-btn) / var(--lh-btn) var(--font-heading); letter-spacing: var(--track-btn);
  transition: color var(--transition), background-color var(--transition), border-color var(--transition); }
.c-menu-btn:hover { background: var(--color-hover-ink); border-color: var(--color-ink-2); }
.c-menu-btn:active { background: var(--color-active-ink); border-color: var(--color-ink); }
.c-menu-btn[aria-expanded="true"] .c-menu-btn__open, .c-menu-btn[aria-expanded="false"] .c-menu-btn__close { display: none; }

/* Panel móvil (< 880): aparece por display, sin animación; única sombra del sistema */
.c-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-menu);
  background: var(--color-paper); border-bottom: var(--border); box-shadow: var(--shadow-menu);
  padding: var(--space-2) var(--edge) var(--space-5); }
.c-header__mobile:has(.c-menu-btn[aria-expanded="true"]) ~ .c-nav { display: block; }
.c-nav__list { list-style: none; margin: 0; padding: 0; }
.c-nav__link { display: flex; align-items: baseline; gap: var(--space-3); min-height: var(--control-h);
  padding-block: var(--space-3) calc(var(--space-3) - var(--line)); border-bottom: var(--border-soft);
  text-decoration: none; color: var(--color-ink-2); font-family: var(--font-heading); }
.c-nav__list > li:last-child .c-nav__link, .c-nav__list > li:has(+ .c-nav__cta) .c-nav__link { border-bottom: 0; padding-bottom: var(--space-3); }
.c-nav__num { font-weight: 500; font-size: var(--text-meta); line-height: var(--lh-meta); letter-spacing: var(--track-meta-num); color: var(--color-ink-3); }
.c-nav__label { font-weight: 500; font-size: var(--text-h4); line-height: var(--lh-h4); color: inherit; }
.c-nav__link:hover { color: var(--color-ink); }
.c-nav__link:focus-visible { outline-offset: calc(-1 * var(--ring)); }
.c-nav__link[aria-current="page"] { color: var(--color-ink); box-shadow: inset var(--bar) 0 0 var(--color-accent);
  margin-left: calc(-1 * var(--space-3)); padding-left: var(--space-3); }
.c-nav__link[aria-current="page"] .c-nav__num { color: var(--color-accent-text); }
.c-nav__cta { margin-top: var(--space-4); }
.c-nav__cta .c-btn { display: flex; width: 100%; }
html.no-js .c-nav { display: block; position: static; box-shadow: none; padding-inline: 0; }
html.no-js .c-menu-btn { display: none; }
/* Sin :has() (Firefox < 121, Safari < 15.4, Chrome < 105): misma degradación que sin JS */
@supports not selector(:has(*)) {
  .c-nav { display: block; position: static; box-shadow: none; padding-inline: 0; }
  .c-menu-btn { display: none; }
}

@media (min-width: 480px) {
  .c-header__wa { display: inline-flex; }
}
@media (min-width: 880px) {
  .c-nav { display: block; position: static; box-shadow: none; border: 0; padding: 0; }
  .c-menu-btn, .c-header__wa, .c-header__mobile { display: none; }
  .c-nav__list { display: flex; align-items: center; gap: var(--space-5); }
  .c-nav__link { display: inline-flex; gap: var(--space-1); padding-block: var(--space-3); border: 0; }
  .c-nav__label { font-size: var(--text-h5); line-height: var(--lh-h5); }
  .c-nav__link[aria-current="page"] { box-shadow: none; margin-left: 0; padding-left: 0; }
  .c-nav__link[aria-current="page"] .c-nav__label { text-decoration: underline; text-decoration-thickness: var(--bar);
    text-underline-offset: var(--underline-offset-nav); text-decoration-color: var(--color-accent); }
  .c-nav__cta { display: none; margin: 0; }
}
@media (min-width: 1100px) {
  .c-nav__list { gap: var(--space-6); }
  .c-nav__cta { display: block; }
  .c-nav__cta .c-btn { display: inline-flex; width: auto; }
}

/* 4.3 Botones: un solo sólido por vista */
.c-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); min-width: var(--btn-min);
  padding: calc(var(--space-3) - var(--line)) var(--control-px); border: var(--line) solid transparent; border-radius: var(--radius);
  background: transparent; font: 600 var(--text-btn) / var(--lh-btn) var(--font-heading); letter-spacing: var(--track-btn);
  text-decoration: none; cursor: pointer;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition); }
.c-btn--block { display: flex; width: 100%; }
.c-btn--compact { min-width: var(--btn-min-compact); padding-inline: var(--space-3); }
.c-btn__num { font-weight: 500; font-size: var(--text-meta); line-height: var(--lh-meta); letter-spacing: var(--track-meta-num); margin-right: var(--space-2); }
.c-btn--primary { background: var(--color-accent); color: var(--color-paper); border-color: var(--color-accent); }
.c-btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.c-btn--primary:active { background: var(--color-accent-active); border-color: var(--color-accent-active); }
.c-btn--secondary { color: var(--color-ink); border-color: var(--color-ink-faint); }
.c-btn--secondary:hover { background: var(--color-hover-ink); border-color: var(--color-ink-2); }
.c-btn--secondary:active { background: var(--color-active-ink); border-color: var(--color-ink); }
.c-btn--ghost { min-width: 0; padding-inline: 0; color: var(--color-accent-text); }
.c-btn--ghost:hover { color: var(--color-accent-active); text-decoration: underline; text-decoration-thickness: var(--underline); }
.c-btn--ghost:active { color: var(--color-accent-900); }
.c-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.c-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.c-actions > * { flex: 1 1 100%; }
@media (min-width: 480px) { .c-actions > * { flex: 0 0 auto; } }

/* 4.4 Kicker numerado sobre regla (un solo color) */
.c-kicker { display: flex; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: var(--border);
  margin-bottom: calc(var(--space-5) - var(--line)); max-width: none;
  font: 600 var(--text-kicker) / var(--lh-kicker) var(--font-heading); text-transform: uppercase; letter-spacing: var(--track-kicker);
  color: var(--color-accent-text); }
.c-kicker--plain { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--space-2); color: var(--color-ink-3); }
.c-label, .c-kicker-text { font: 600 var(--text-kicker) / var(--lh-kicker) var(--font-heading); text-transform: uppercase;
  letter-spacing: var(--track-kicker); color: var(--color-ink-3); }

/* 4.5 Celdas de servicio y módulos de contacto */
.c-cells, .c-modules { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.c-cell, .c-module { border: var(--border); padding: calc(var(--space-5) - var(--line)); display: flex; flex-direction: column; background: transparent; }
.c-cell__num { font: 600 var(--text-kicker) / var(--lh-kicker) var(--font-heading); text-transform: uppercase; letter-spacing: var(--track-kicker); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.c-cell__title { margin-top: var(--space-2); }
.c-cell__body { color: var(--color-ink-2); margin-top: var(--space-4); }
.c-cell__link, .c-cell__action { margin-top: auto; padding-top: var(--space-5); align-self: flex-start; }
.c-module__value { display: inline-block; margin-top: var(--space-4); font: 400 var(--text-body) / var(--lh-body) var(--font-mono); color: var(--color-ink);
  -webkit-user-select: all; user-select: all; text-decoration: underline; text-decoration-thickness: var(--underline); text-underline-offset: var(--underline-offset); text-decoration-color: var(--color-ink-faint); }
.c-module__value:hover { color: var(--color-accent-text); }
@media (min-width: 720px) { .c-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 880px) { .c-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 4.6 Tabla spec: hoja impresa; linealiza < 720 conservando semántica ARIA */
.c-spec { table-layout: fixed; width: 100%; border-collapse: collapse; }
.c-spec__col-num { width: var(--spec-num-w); }
.c-spec__col-name { width: 26%; }
.c-spec__col-out { width: 28%; }
.c-spec th { font: 600 var(--text-kicker) / var(--lh-kicker) var(--font-heading); text-transform: uppercase; letter-spacing: var(--track-kicker);
  color: var(--color-ink-3); text-align: left; vertical-align: bottom; padding: 0 var(--space-3) var(--space-2) 0; border-bottom: var(--border); }
.c-spec td { color: var(--color-ink-2); vertical-align: top; overflow-wrap: anywhere; }
.c-spec__num { font: 500 var(--text-body) / var(--lh-body) var(--font-heading); color: var(--color-accent-text); }
.c-spec__name { font: 600 var(--text-h4) / var(--lh-h4) var(--font-heading); color: var(--color-ink); }
.c-spec .c-doc { color: var(--color-ink-2); }
/* Base (< 720): bloques */
.c-spec:not(.c-spec--2), .c-spec:not(.c-spec--2) tbody, .c-spec:not(.c-spec--2) tr { display: block; }
.c-spec:not(.c-spec--2) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.c-spec:not(.c-spec--2) tr { padding: var(--space-4) 0 calc(var(--space-4) - var(--line)); border-bottom: var(--border); }
.c-spec:not(.c-spec--2) tbody tr:first-child { border-top: var(--border); }
.c-spec:not(.c-spec--2) td { display: grid; grid-template-columns: var(--spec-label-w) minmax(0, 1fr); column-gap: var(--space-3); padding: 0; border: 0; }
.c-spec:not(.c-spec--2) td + td { margin-top: var(--space-2); }
.c-spec:not(.c-spec--2) td::before { content: attr(data-label); font: 600 var(--text-kicker) / var(--lh-kicker) var(--font-heading);
  text-transform: uppercase; letter-spacing: var(--track-kicker); color: var(--color-ink-3); padding-top: var(--space-1); }
.c-spec:not(.c-spec--2) td.c-spec__num, .c-spec:not(.c-spec--2) td.c-spec__name { display: inline; margin: 0; font: 600 var(--text-h4) / var(--lh-h4) var(--font-heading); }
.c-spec:not(.c-spec--2) td.c-spec__num::before, .c-spec:not(.c-spec--2) td.c-spec__name::before { content: none; }
.c-spec:not(.c-spec--2) td.c-spec__num::after { content: " · "; }
@media (min-width: 720px) {
  .c-spec:not(.c-spec--2) { display: table; }
  .c-spec:not(.c-spec--2) thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .c-spec:not(.c-spec--2) tbody { display: table-row-group; }
  .c-spec:not(.c-spec--2) tr, .c-spec:not(.c-spec--2) tbody tr:first-child { display: table-row; padding: 0; border: 0; }
  .c-spec:not(.c-spec--2) td, .c-spec:not(.c-spec--2) td.c-spec__num, .c-spec:not(.c-spec--2) td.c-spec__name { display: table-cell; margin: 0;
    padding: var(--space-4) var(--space-3) calc(var(--space-4) - var(--line)) 0; border-bottom: var(--border-soft); }
  .c-spec:not(.c-spec--2) td:last-child { padding-right: 0; }
  .c-spec:not(.c-spec--2) tbody tr:last-child td { border-bottom-color: var(--color-line); }
  .c-spec:not(.c-spec--2) td::before, .c-spec:not(.c-spec--2) td.c-spec__num::after { content: none; }
  .c-spec:not(.c-spec--2) td.c-spec__num { font: 500 var(--text-body) / var(--lh-body) var(--font-heading); }
  .c-spec:not(.c-spec--2) td.c-spec__name { font: 600 var(--text-h4) / var(--lh-h4) var(--font-heading); }
}
/* Variante de dos columnas (horario, datos, entrada/entrega): nunca linealiza */
.c-spec--2 th[scope="row"] { font: 500 var(--text-body) / var(--lh-body) var(--font-body); color: var(--color-ink); text-transform: none; letter-spacing: 0; vertical-align: top; }
.c-spec--2 th[scope="row"], .c-spec--2 td { padding: var(--space-2) var(--space-3) calc(var(--space-2) - var(--line)) 0; border-bottom: var(--border-soft); }
.c-spec--2 tbody tr:first-child th, .c-spec--2 tbody tr:first-child td { border-top: var(--border); }
.c-spec--2 tbody tr:last-child th, .c-spec--2 tbody tr:last-child td { border-bottom-color: var(--color-line); }
.c-spec--2 td:last-child, .c-spec--2 th:last-child { padding-right: 0; }
.c-spec--2 .c-spec__col-a { width: 40%; }
.c-io th[scope="col"] { padding-top: 0; }
.c-io td { padding: var(--space-4) var(--space-3) calc(var(--space-4) - var(--line)) 0; }
.c-io .c-spec__col-a { width: 50%; }

/* 4.7 Timeline de 1 px: lista vertical < 1100; track SVG + 8 columnas ≥ 1100 */
.c-timeline__track { display: none; }
.c-timeline__line, .c-timeline__tick { stroke: var(--color-line); stroke-width: 1; shape-rendering: crispEdges; }
.c-timeline__tick { stroke: var(--color-ink-faint); }
.c-timeline__mask { fill: var(--color-paper); }
.c-timeline__fill { fill: var(--color-accent); }
.c-timeline__list { list-style: none; margin: 0 0 0 var(--tick-half); padding: 0; border-left: var(--border); }
.c-timeline__item { position: relative; padding: var(--space-3) 0 calc(var(--space-3) - var(--line)) var(--space-6); border-bottom: var(--border-soft); text-align: left; }
.c-timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--tick-half)); top: calc(var(--space-3) + var(--tick));
  width: var(--tick); height: var(--line); background: var(--color-ink-faint); }
.c-timeline__item--current::before { width: var(--tick); height: var(--tick); top: calc(var(--space-3) + var(--tick-half)); background: var(--color-accent); }
.c-timeline__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.c-timeline__num { font: 600 var(--text-kicker) / var(--lh-kicker) var(--font-heading); text-transform: uppercase; letter-spacing: var(--track-kicker); color: var(--color-ink-3); }
.c-timeline__item--current .c-timeline__num { color: var(--color-accent-text); }
.c-timeline__title { font: 600 var(--text-h4) / var(--lh-h4) var(--font-heading); color: var(--color-ink); }
.c-timeline__sub { font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-ink-3); }
.c-timeline__doc { color: var(--color-ink-2); }
@media (min-width: 1100px) {
  /* Sin gap entre columnas: los centros de columna deben coincidir con los ticks
     del SVG, que están en porcentajes fijos. El aire se da con padding interno. */
  .c-timeline__track { display: block; }
  .c-timeline__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: start; margin: var(--space-4) 0 0; border: 0; }
  .c-timeline__item { padding: 0 var(--space-2); border: 0; text-align: center; }
  .c-timeline__item::before { content: none; }
  .c-timeline__head { display: block; }
  .c-timeline__sep { display: none; }
  /* Número y título en líneas propias: como spans en línea se pegaban entre sí. */
  .c-timeline__num { display: block; }
  .c-timeline__title { display: block; margin-top: var(--space-2);
    font-size: var(--text-h5); line-height: var(--lh-h5); text-wrap: balance; }
  .c-timeline__doc { margin-top: var(--space-3);
    font-size: var(--text-small); line-height: var(--lh-small); text-wrap: balance; }
}
.c-sequence { color: var(--color-ink-3); max-width: none; }

/* 4.8 Split texto / figura (5 / 7) y figura en marco hairline */
.c-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.c-split__figure { order: -1; }
.c-split__text p { color: var(--color-ink-2); max-width: var(--measure-note); margin-top: var(--space-4); }
.c-split__text .c-actions { margin-top: var(--space-5); }
.c-figure { border: var(--border); padding: 0; margin: 0; background: transparent; }
.c-figure img, .c-figure__empty { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.c-figure--portrait img, .c-figure--portrait .c-figure__empty { aspect-ratio: 4 / 5; }
.c-figure__empty { display: grid; place-content: center; text-align: center; padding: var(--space-5);
  font: 600 var(--text-kicker) / var(--lh-kicker) var(--font-heading); text-transform: uppercase; letter-spacing: var(--track-kicker); color: var(--color-ink-3); }
.c-figure__caption { font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-ink-3); margin-top: var(--space-2); }
.c-figure-wrap .c-figure__caption { margin-top: var(--space-2); }
@media (min-width: 720px) {
  .c-split { grid-template-columns: var(--grid); align-items: center; }
  .c-split__text { grid-column: 1 / span 5; }
  .c-split__figure { order: 0; grid-column: 6 / span 7; }
  .c-split--figure-first .c-split__figure { grid-column: 1 / span 7; }
  .c-split--figure-first .c-split__text { grid-column: 8 / span 5; }
}
@media (min-width: 1100px) {
  .c-split__figure { grid-column: 7 / span 6; }
  .c-split--figure-first .c-split__figure { grid-column: 1 / span 7; }
}

/* 4.9 Cita con puntuación colgante */
.c-quote { padding-block: var(--space-7) 0; }
.c-quote blockquote p { font: 500 var(--text-quote-s) / var(--lh-quote-s) var(--font-heading); color: var(--color-ink);
  max-width: var(--measure-quote); text-wrap: balance; hanging-punctuation: first; text-indent: var(--hang-quote); }
.c-quote figcaption { font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-ink-3); margin-top: var(--space-4); text-indent: var(--hang-dash); padding-left: calc(-1 * var(--hang-dash)); }
@supports (hanging-punctuation: first) { .c-quote blockquote p { text-indent: 0; } }
@media (min-width: 720px) {
  .c-quote blockquote p { font-size: var(--text-quote); line-height: var(--lh-quote); letter-spacing: var(--track-h2); }
}

/* 4.10 Banda final de contacto (accent-900): exclusiva de Inicio */
.c-band { background: var(--color-field); color: var(--color-on-field); padding-block: var(--section-y); --color-focus: var(--color-paper); }
.c-band ::selection { background: var(--color-accent-300); color: var(--color-ink); }
.c-band .c-kicker { color: var(--color-on-field-kicker); border-color: var(--color-line-on-field); }
.c-band__title { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); color: var(--color-on-field); }
.c-band__text { color: var(--color-on-field-2); margin-top: var(--space-4); }
.c-band .c-actions { margin-top: var(--space-6); }
.c-band__note { font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-on-field-3); margin-top: var(--space-6); }
.c-band .c-btn--primary { background: var(--color-paper); color: var(--color-accent-900); border-color: var(--color-paper); }
.c-band .c-btn--primary:hover { background: var(--color-accent-100); border-color: var(--color-accent-100); }
.c-band .c-btn--primary:active { background: var(--color-accent-200); border-color: var(--color-accent-200); }
.c-band .c-btn--secondary { color: var(--color-paper); border-color: var(--color-line-strong-on-field); }
.c-band .c-btn--secondary:hover { background: var(--color-hover-paper); border-color: var(--color-paper); }
.c-band .c-btn--secondary:active { background: var(--color-active-paper); border-color: var(--color-paper); }

/* 4.11 Cierre de página (interiores): sin fondo */
.c-closing { padding-block: var(--section-y); border-top: var(--border); }
.c-closing__text { color: var(--color-ink-2); margin-top: var(--space-4); }
.c-closing .c-actions { margin-top: var(--space-6); }
.c-closing__note { font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-ink-3); margin-top: var(--space-4); }

/* 4.12 Formulario nativo */
.c-form { max-width: var(--form-max); display: grid; gap: var(--space-4); }
.c-form__intro { color: var(--color-ink-2); }
.c-form__row { display: grid; gap: var(--space-4); }
.c-field { display: grid; gap: var(--space-2); }
.c-label { display: block; }
.c-input, .c-textarea, .c-select { width: 100%; min-height: var(--control-h); padding: calc(var(--space-3) - var(--line)) var(--control-px);
  background: var(--color-surface); border: var(--border-control); border-radius: var(--radius); color: var(--color-ink);
  font: 400 var(--text-body) / var(--lh-body) var(--font-body); caret-color: var(--color-accent);
  transition: border-color var(--transition), background-color var(--transition), outline-color var(--transition); }
.c-textarea { min-height: var(--textarea-min); resize: vertical; }
.c-input::placeholder, .c-textarea::placeholder { color: var(--color-ink-3); opacity: 1; }
.c-input:hover, .c-textarea:hover, .c-select:hover { border-color: var(--color-ink-2); }
.c-input:focus-visible, .c-textarea:focus-visible, .c-select:focus-visible { border-color: var(--color-accent); outline: var(--ring) solid var(--color-accent); outline-offset: 0; }
.c-input[aria-invalid="true"], .c-textarea[aria-invalid="true"], .c-select[aria-invalid="true"] { border-color: var(--color-danger); box-shadow: inset 0 0 0 var(--line) var(--color-danger); }
.c-input:disabled, .c-textarea:disabled, .c-select:disabled { border-color: var(--color-neutral-300); background: var(--color-paper); color: var(--color-ink-3); cursor: not-allowed; }
.c-help { font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-ink-3); }
.c-error { font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-danger); }
.c-check { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--control-h); color: var(--color-ink-2); }
.c-check__box { appearance: none; width: var(--check); height: var(--check); margin: var(--check-offset) 0 0; flex: none;
  border: var(--border-control); background: var(--color-surface); border-radius: var(--radius); display: grid; place-content: center; cursor: pointer; }
.c-check__box::before { content: ""; width: var(--check-dot); height: var(--check-dot); background: var(--color-accent); transform: scale(0); }
.c-check__box:checked { border-color: var(--color-accent); }
.c-check__box:checked::before { transform: scale(1); }
.c-form__note { font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-ink-3); }
@media (min-width: 720px) { .c-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 4.13 Aviso: marco hairline, sin fondo, sin icono */
.c-notice { border: var(--line) solid var(--color-line); padding: calc(var(--space-4) - var(--line)) calc(var(--space-5) - var(--line));
  display: grid; gap: var(--space-2); max-width: var(--form-max); }
.c-notice__title { font: 600 var(--text-h5) / var(--lh-h5) var(--font-heading); }
.c-notice__kicker { font: 600 var(--text-kicker) / var(--lh-kicker) var(--font-heading); text-transform: uppercase; letter-spacing: var(--track-kicker); color: var(--color-accent-text); }
.c-notice__list { padding-left: 1.2em; }
.c-notice--error { border-color: var(--color-danger); }
.c-notice--error .c-notice__title { color: var(--color-danger); }
.c-notice--warn { border-color: var(--color-warn); }
.c-notice--warn .c-notice__title { color: var(--color-warn-text); }

/* 4.14 Chips: no interactivos, 13 px */
.c-tag { display: inline-flex; align-items: center; height: var(--tag-h); padding: 0 var(--space-2); border: var(--border-control); border-radius: var(--radius);
  font: 600 var(--text-kicker) / var(--lh-kicker) var(--font-heading); text-transform: uppercase; letter-spacing: var(--track-tag);
  color: var(--color-ink-2); white-space: nowrap; }
.c-tag--accent { background: var(--color-accent-100); border-color: var(--color-accent-300); color: var(--color-accent-text); }
.c-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* 4.15 Acordeón nativo (details), indicador +/− en pseudoelementos */
.c-acc summary { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); min-height: var(--control-h);
  padding: var(--space-3) var(--space-6) calc(var(--space-3) - var(--line)) 0; border-top: var(--border); list-style: none; cursor: pointer;
  font: 600 var(--text-h4) / var(--lh-h4) var(--font-heading); color: var(--color-ink); transition: color var(--transition); }
.c-acc summary::-webkit-details-marker { display: none; }
.c-acc summary::before, .c-acc summary::after { content: ""; position: absolute; right: 0; top: calc(var(--space-3) + var(--tick)); width: var(--tick); height: var(--line); background: var(--color-ink-faint); }
.c-acc summary::after { width: var(--line); height: var(--tick); right: calc(var(--tick-half) - var(--line)); top: calc(var(--space-3) + var(--tick-half)); }
.c-acc[open] summary::after { content: none; }
.c-acc summary:hover { color: var(--color-accent-text); }
.c-acc summary:focus-visible { outline-offset: calc(-1 * var(--ring)); }
.c-acc-group .c-acc:last-child { border-bottom: var(--border); }
.c-acc__body { padding: var(--space-5) 0; display: grid; gap: var(--space-5); }
.c-acc__body h4 { font: 600 var(--text-kicker) / var(--lh-kicker) var(--font-heading); text-transform: uppercase; letter-spacing: var(--track-kicker); color: var(--color-ink-3); margin-bottom: var(--space-2); }
.c-list { list-style: none; padding-left: 1.2em; color: var(--color-ink-2); }
.c-list li { text-indent: -1.2em; }
.c-list li + li { margin-top: var(--space-2); }
.c-list li::before { content: "— "; }
@media (min-width: 720px) { .c-acc__body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); } }

/* 4.16 Lista de pasos numerados */
.c-steps { list-style: none; padding: 0; margin: 0; }
.c-steps li { display: grid; grid-template-columns: var(--steps-num-w) minmax(0, 1fr); column-gap: var(--space-3); align-items: baseline;
  padding: var(--space-4) 0 calc(var(--space-4) - var(--line)); border-bottom: var(--border-soft); }
.c-steps li:first-child { border-top: var(--border); }
.c-steps li:last-child { border-bottom-color: var(--color-line); }
.c-steps__num { grid-column: 1; grid-row: 1; font: 600 var(--text-kicker) / var(--lh-kicker) var(--font-heading); text-transform: uppercase; letter-spacing: var(--track-kicker); color: var(--color-accent-text); }
.c-steps__title { grid-column: 2; grid-row: 1; font: 500 var(--text-h5) / var(--lh-h5) var(--font-heading); color: var(--color-ink); }
.c-steps__sub { grid-column: 2; color: var(--color-ink-2); max-width: var(--measure); }
.c-steps__docs { grid-column: 2; color: var(--color-ink-2); }
.c-steps__meta { grid-column: 2; font-family: var(--font-mono); font-size: var(--text-mono); line-height: var(--lh-mono); color: var(--color-ink-3); }
.c-steps--compact li { padding: var(--space-2) 0 calc(var(--space-2) - var(--line)); }
@media (min-width: 480px) {
  .c-steps li { grid-template-columns: var(--steps-num-w) minmax(0, 1fr) auto; }
  .c-steps__meta { grid-column: 3; grid-row: 1; text-align: right; }
}

/* 4.17 Footer de una línea */
.c-footer { border-top: var(--border); padding-block: calc(var(--space-7) - var(--line)) var(--space-7);
  font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-ink-3); }
.c-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--space-5); }
.c-footer__meta { flex: 1 1 100%; max-width: none; padding-block: var(--space-3); }
.c-footer__links { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.c-footer__links a { display: inline-block; padding-block: var(--space-3); color: var(--color-ink-3); text-decoration: underline;
  text-decoration-thickness: var(--underline); text-underline-offset: var(--underline-offset); text-decoration-color: var(--color-ink-faint); }
.c-footer__links a:hover { color: var(--color-ink); }
@media (min-width: 720px) { .c-footer__meta { flex: 0 1 auto; } }

/* ---------- 5. Utilidades ---------- */
.u-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.u-mt-2 { margin-top: var(--space-2); } .u-mt-4 { margin-top: var(--space-4); } .u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); } .u-mt-7 { margin-top: var(--space-7); } .u-mt-8 { margin-top: var(--space-8); }
.u-measure { max-width: var(--measure); }
/* Superposición de retícula de 8 (solo desarrollo; no se publica) */
html.debug body { background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--space-2) - var(--line)), var(--debug-line) calc(var(--space-2) - var(--line)) var(--space-2)); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  @page { margin: 20mm; }
  body { background: white; color: black; }
  .c-skip, .c-nav, .c-menu-btn, .c-header__mobile, .c-btn, .c-actions { display: none !important; }
  .c-band, .c-closing { background: none; color: black; border: var(--line) solid black; padding: var(--space-5); }
  .c-band .c-kicker, .c-band__text, .c-band__note { color: black; }
  .c-link--arrow::after { content: " (" attr(href) ")"; font-family: var(--font-mono); font-size: var(--text-mono); }
}