/* ==========================================================================
   Villar Electro — Estilo Definitivo: Instrumental de Campo (Fluke)
   Chasis grafito oscuro, gris titanio, amarillo voltio reglamentario y cian LCD.
   Esquinas biseladas a 45° (chamfer) y sombras duras táctiles.
   ========================================================================== */
@layer base, theme, layout, components, utilities;

@layer theme {
  :root {
    color-scheme: light dark;
    interpolate-size: allow-keywords;

    &:has(> head > meta[name="color-scheme"][content="dark"]) {
      color-scheme: dark;
    }
    &:has(> head > meta[name="color-scheme"][content="light"]) {
      color-scheme: light;
    }

    --in-oklab: ;
    --in-oklch: ;

    /* Tipografías industriales condensadas */
    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
    --heading-transform: none;
    --heading-tracking: 0.005em;
    --heading-line-height: 1.1;
    --h1-size: clamp(2.45rem, 1.55rem + 4.3vw, 4.3rem);
    --h2-size: clamp(2rem, 1.4rem + 2.9vw, 3.1rem);
    --h3-size: clamp(1.28rem, 1.1rem + 0.7vw, 1.58rem);

    /* Esquinas biseladas de chasis industrial y sombras duras */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-btn: 2px;
    --tick-radius: 0px;
    --border-width: 1px;
    --card-clip: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
    --btn-clip: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    --card-top-border: 4px solid var(--accent);
    --card-left-border: 1px solid var(--line);
    --head-border: 5px solid var(--accent);
    --head-indent: 0.95rem;
    --shadow-card: 4px 4px 0 rgba(15, 20, 26, 0.14);
    --shadow-float: 6px 6px 0 rgba(0, 0, 0, 0.45);
    --btn-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
    --icon-stroke-width: 2;

    /* Paleta Modo Claro (Gris Titanio + Grafito + Amarillo Voltio) */
    --bg-light: #EAECEF;
    --bg-alt-light: #DCE1E7;
    --panel-light: #FFFFFF;
    --fg-light: #101418;
    --muted-light: #38414C;
    --line-light: #A9B4C0;
    --line-subtle-light: #CBD3DC;
    --link-light: #6B4E00;

    /* Paleta Modo Oscuro (Chasis de Instrumento) */
    --bg-dark: #0A0D10;
    --bg-alt-dark: #11161C;
    --panel-dark: #171D25;
    --fg-dark: #EDF2F7;
    --muted-dark: #B7C4D2;
    --line-dark: #2B3746;
    --line-subtle-dark: #202935;
    --link-dark: #FFD43B;

    /* Acento Amarillo Voltio + Cian Digital */
    --accent: #F2B600;
    --accent-hover: #FFC81A;
    --accent-text: light-dark(#6B4E00, #F2B600);
    --accent-ink: #0A0D10;
    --accent-secondary: #00A8E8;

    /* Bandas de Chasis Grafito */
    --band: light-dark(#F6F7F9, #11151A);
    --band-2: light-dark(#FFFFFF, #1A2028);
    --band-fg: light-dark(#101418, #F0F4F8);
    --band-muted: light-dark(#38414C, #C3CEDA);
    --band-line: light-dark(#A9B4C0, #2C3846);
    --band-gradient: linear-gradient(180deg, light-dark(#F6F7F9, #0E1217) 0%, light-dark(#E6EAEF, #171D24) 100%);

    /* Cuadrícula milimetrada de osciloscopio / plano en bandas */
    --body-pattern: none;
    --hero-surface-pattern:
      linear-gradient(to right, light-dark(rgba(107, 78, 0, 0.1), rgba(242, 182, 0, 0.06)) 1px, transparent 1px),
      linear-gradient(to bottom, light-dark(rgba(107, 78, 0, 0.1), rgba(242, 182, 0, 0.06)) 1px, transparent 1px),
      var(--band-gradient);
    --hero-pattern-size: 20px 20px, 20px 20px, 100% 100%;

    /* Contacto en Amarillo Voltio de alta visibilidad */
    --contact-bg: #F2B600;
    --contact-fg: #0A0D10;
    --contact-btn-bg: #11151A;
    --contact-btn-fg: #F2B600;

    /* Logo e Ilustraciones estilo Multímetro Digital Fluke */
        --logo-v: light-dark(#1B1D21, #F0F4F8);
    --logo-bolt: #F2B51A;
    --art-chassis: light-dark(#FFFFFF, #181E26);
    --art-screen: light-dark(#EEF1F4, #0B1218);
    --art-on-accent: light-dark(#FFFFFF, #0B1218);
    --art-stroke: light-dark(#A9B4C0, #324050);
    --art-accent: light-dark(#8A6500, #F2B600);
    --art-secondary: light-dark(#0369A1, #38BDF8);
    --art-neutral: light-dark(#1B2430, #E2E8F0);
    --art-muted: light-dark(#4A5666, #94A3B8);
    --art-rx: 2px;
    --art-label: "ESQUEMA TÉCNICO · TABLERO GENERAL";
    --art-gauge-label: "TELURÓMETRO DIGITAL · ENSAYO SRT 900/15";

    --ok: light-dark(#14633A, #4CC38A);
    --err: light-dark(#B3261E, #F2B8B5);
    --warn-bg: light-dark(#FFF5D6, #261E06);
    --warn-fg: light-dark(#543D00, #FFD659);
    --warn-line: light-dark(#D49B00, #8A6500);

    /* Asignación reactiva claro/oscuro */
    --bg: var(--bg-light);
    --bg-alt: var(--bg-alt-light);
    --panel: var(--panel-light);
    --fg: var(--fg-light);
    --muted: var(--muted-light);
    --line: var(--line-light);
    --line-subtle: var(--line-subtle-light);
    --link: var(--link-light);

    @media (prefers-color-scheme: dark) {
      --bg: var(--bg-dark);
      --bg-alt: var(--bg-alt-dark);
      --panel: var(--panel-dark);
      --fg: var(--fg-dark);
      --muted: var(--muted-dark);
      --line: var(--line-dark);
      --line-subtle: var(--line-subtle-dark);
      --link: var(--link-dark);
    }

    @supports (color: light-dark(white, black)) {
      --bg: light-dark(var(--bg-light), var(--bg-dark));
      --bg-alt: light-dark(var(--bg-alt-light), var(--bg-alt-dark));
      --panel: light-dark(var(--panel-light), var(--panel-dark));
      --fg: light-dark(var(--fg-light), var(--fg-dark));
      --muted: light-dark(var(--muted-light), var(--muted-dark));
      --line: light-dark(var(--line-light), var(--line-dark));
      --line-subtle: light-dark(var(--line-subtle-light), var(--line-subtle-dark));
      --link: light-dark(var(--link-light), var(--link-dark));
    }

    accent-color: var(--accent);
    scrollbar-width: thin;
    scrollbar-color: var(--line) var(--bg-alt);
  }

  @supports (background: linear-gradient(in oklab, white, black)) {
    :root {
      --in-oklab: in oklab;
      --in-oklch: in oklch;
    }
  }

  @media (forced-colors: active) {
    :root {
      --line: CanvasText;
      --line-subtle: GrayText;
      --band-line: CanvasText;
    }
  }
}

@layer base {
  html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-block-start: 5rem;
    text-size-adjust: 100%;
  }

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

  body, header, nav, main, section, article, aside, footer, div, p,
  h1, h2, h3, h4, ul, ol, li, dl, dt, dd, figure, figcaption,
  form, fieldset, legend, label, input, select, textarea, button, pre, code, details, summary {
    box-sizing: border-box;
  }

  body {
    background-color: var(--bg);
    background-image: var(--body-pattern, none);
    background-size: var(--body-pattern-size, auto);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 0;
    overflow-x: clip;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  ::selection {
    background-color: var(--accent);
    color: var(--accent-ink);
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: var(--heading-weight, 700);
    line-height: var(--heading-line-height);
    margin: 0;
    text-wrap: balance;
    letter-spacing: var(--heading-tracking);
    text-transform: var(--heading-transform);
  }

  h2 {
    font-size: var(--h2-size);
  }

  h3 {
    font-size: var(--h3-size);
  }

  p, li, dd {
    margin: 0;
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  p {
    max-inline-size: 68ch;
  }

  svg {
    display: block;
  }

  a {
    color: var(--link);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1.5px;
  }

  a:hover {
    text-decoration: underline;
  }

  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }
}

@layer layout {
  .wrap {
    max-inline-size: 72rem;
    margin-inline: auto;
    padding-inline-start: max(1rem, env(safe-area-inset-left, 0px));
    padding-inline-end: max(1rem, env(safe-area-inset-right, 0px));
  }

  section {
    padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
    border-block-end: 1px solid var(--line-subtle);
  }

  .band {
    background-color: var(--band);
    background-image: var(--band-gradient);
    color: var(--band-fg);
  }

  .blueprint-surface {
    background-color: var(--band);
    background-image: var(--hero-surface-pattern, var(--band-gradient));
    background-size: var(--hero-pattern-size, auto);
  }

  .head {
    display: grid;
    gap: 0.5rem;
    margin-block-end: 2.1rem;
    padding-inline-start: var(--head-indent, 1rem);
    border-inline-start: var(--head-border, 4px solid var(--accent));
  }

  .head p {
    color: var(--muted);
    font-size: 1.1rem;
  }
}

@layer components {
  .skip-link,
  .visually-hidden {
    position: absolute;
    clip-path: inset(50%);
    overflow: clip;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
  }

  .skip-link:focus {
    clip-path: none;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    inset-block-start: 0.5rem;
    inset-inline-start: 1rem;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 0.65rem 1rem;
    font-weight: 600;
    z-index: 100;
  }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 600;
    text-box: trim-both cap alphabetic;
  }

  .band .eyebrow {
    color: var(--band-muted);
  }

  .pending-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    background-color: var(--warn-bg);
    color: var(--warn-fg);
    border: 1px dashed var(--warn-line);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.5rem;
    text-box: trim-both cap alphabetic;
  }

  /* Botones parametrizados */
  .btn {
    display: inline-flex;
    align-items: safe center;
    justify-content: center;
    gap: 0.55rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    min-block-size: 3rem;
    padding-block: 0.7rem;
    padding-inline: 1.35rem;
    border-radius: var(--radius-btn);
    border: 2px solid var(--accent);
    background-color: var(--accent);
    color: var(--accent-ink);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--btn-shadow);
    clip-path: var(--btn-clip, none);
    transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
  }

  .btn:hover:not(:disabled) {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    text-decoration: none;
    transform: translateY(-1px);
  }

  .btn:active:not(:disabled) {
    transform: translateY(1px);
  }

  .btn:focus-visible {
    clip-path: none;
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }

  .btn:disabled,
  .btn.disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
  }

  .btn.ghost {
    background-color: transparent;
    color: inherit;
    border-color: currentColor;
    box-shadow: none;
  }

  .btn.ghost:hover:not(:disabled) {
    background-color: color-mix(in oklab, var(--accent) 16%, transparent);
    border-color: var(--accent);
  }

  .btn.sm {
    min-block-size: 2.4rem;
    padding-block: 0.45rem;
    padding-inline: 0.9rem;
    font-size: 0.84rem;
  }

  .service-item > .btn,
  .doc-links .btn,
  .card > .btn {
    box-sizing: border-box;
    min-block-size: 2rem;
    padding-block: 0.2rem;
    padding-inline: 0.8rem;
    font-size: 0.85rem;
    border-width: 1px;
    box-shadow: none;
  }

  .ico {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }

  /* Logo adaptable a cada tema */
  .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
  }

  .logo:hover {
    text-decoration: none;
  }

  .logo svg {
    inline-size: 2.6rem;
    block-size: 2.8rem;
    flex: none;
  }

  /* Filete entre isotipo y nombre; ELECTRO va justificado al ancho de VILLAR */
  .logo .w {
    display: grid;
    gap: 0.32rem;
    padding-inline-start: 0.7rem;
    border-inline-start: 1px solid var(--band-line);
    line-height: 1;
  }

  .logo .w b {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: 0.08em;
    margin-inline-end: -0.08em;
    color: var(--band-fg);
    text-box: trim-both cap alphabetic;
  }

  .logo .w span {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.49em;
    margin-inline-end: -0.49em;
    text-transform: uppercase;
    color: var(--accent-text);
    text-box: trim-both cap alphabetic;
  }

  /* Encabezado */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    container-type: scroll-state;
    container-name: site-header;
    background-color: var(--band);
    border-block-end: 1px solid var(--band-line);
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: safe center;
    gap: 0.75rem;
    padding-block: 0.8rem;
    flex-wrap: wrap;
  }

  /* Sombra de ancho completo: en .top se veía cortada a los costados */
  .site-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    block-size: 14px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.22), transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  @container site-header scroll-state(stuck: top) {
    .site-header::after {
      opacity: 1;
    }
  }

  .header-actions {
    display: flex;
    align-items: safe center;
    gap: 0.5rem;
  }

  .icon-btn {
    background-color: var(--band-2);
    color: var(--band-fg);
    border: 1px solid var(--band-line);
    border-radius: var(--radius-sm);
    inline-size: 2.6rem;
    block-size: 2.6rem;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
  }

  .icon-btn:hover {
    border-color: var(--accent);
    color: var(--accent-text);
  }

  .main-nav .nav-cta {
    color: var(--accent-ink);
    background-color: var(--accent);
    inline-size: fit-content;
    padding-block: 0.45rem;
    padding-inline: 1.1rem;
    border-radius: var(--radius-btn);
    font-weight: 600;
  }

  .main-nav .nav-cta:hover {
    color: var(--accent-ink);
    background-color: var(--accent-hover);
  }

  .main-nav {
    order: 3;
    display: none;
    inline-size: 100%;
    flex-direction: column;
    gap: 0.25rem;
    padding-block-start: 0.75rem;
    margin-block-start: 0.35rem;
    border-block-start: 1px solid var(--band-line);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    color: var(--band-muted);
    text-decoration: none;
    padding-block: 0.45rem;
  }

  .main-nav a:hover,
  .main-nav a[aria-current="page"] {
    color: var(--accent-text);
  }

  /* Portada (Hero) */
  .hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    padding-block: clamp(2.1rem, 1.5rem + 2.8vw, 3.8rem);
    align-items: center;
  }

  .hero h1 {
    font-size: var(--h1-size);
    color: var(--band-fg);
    line-height: 1.08;
    margin-block-start: 0.55rem;
  }

  .hero h1 em {
    font-style: normal;
    color: var(--accent-text);
    text-decoration: var(--hero-em-underline, none);
    text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.12em;
  }

  .hero p.lead {
    color: var(--band-muted);
    max-inline-size: 56ch;
    margin-block-start: 1.15rem;
    font-size: 1.08rem;
  }

  .hero .cta {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-block-start: 1.65rem;
  }

  .hero .btn.ghost {
    color: var(--band-fg);
    border-color: var(--band-line);
    background-color: color-mix(in oklab, var(--band-2) 75%, transparent);
  }

  .ticks {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: balance;
    gap: 0.55rem 1.3rem;
    margin-block-start: 1.8rem;
    padding-block-start: 1.15rem;
    border-block-start: 1px solid var(--band-line);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--band-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

  .ticks span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
  }

  .ticks span::before {
    content: "";
    display: inline-block;
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-radius: var(--tick-radius, 0);
    background-color: var(--accent);
  }

  /* Contenedor de ilustraciones SVG parametrizables */
  .art {
    min-inline-size: 0;
    max-inline-size: 29rem;
    margin-inline: auto;
    inline-size: 100%;
    background-color: var(--art-chassis);
    border: 1px solid var(--art-stroke);
    border-radius: var(--radius-lg);
    padding: 0.9rem;
    box-shadow: var(--shadow-card);
    position: relative;
  }

  .art::before {
    content: var(--art-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: var(--art-muted);
    padding-block-end: 0.55rem;
    margin-block-end: 0.55rem;
    border-block-end: 1px solid var(--art-stroke);
  }

  #documentacion .art::before {
    content: var(--art-gauge-label);
  }

  .art svg {
    inline-size: 100%;
    block-size: auto;
  }

  /* Servicios con Subgrid */
  .groups {
    container: services-grid / inline-size;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap, 1.3rem);
  }

  .group {
    background-color: var(--panel);
    border: 1px solid var(--line);
    border-block-start: var(--card-top-border);
    border-inline-start: var(--card-left-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 1.4rem;
    display: grid;
    grid-row: span 3;
    grid-template-rows: auto 1fr auto;
    grid-template-rows: subgrid;
    gap: 1rem;
    clip-path: var(--card-clip, none);
  }

  .group-top {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-block-end: 0.9rem;
    border-block-end: 1px solid var(--line-subtle);
  }

  .tile {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--tile-bg, var(--band));
    color: var(--tile-fg, var(--accent-text));
    border: 1px solid var(--tile-border, var(--band-line));
    display: grid;
    place-items: center;
    flex: none;
  }

  .tile .ico {
    inline-size: 1.45rem;
    block-size: 1.45rem;
  }

  .service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
    align-content: start;
  }

  .service-item {
    display: grid;
    gap: 0.4rem;
  }

  .service-item > .btn {
    justify-self: end;
    align-self: start;
    margin-block-start: 0.35rem;
  }

  .service-item:not(:last-child) {
    padding-block-end: 0.85rem;
    border-block-end: 1px dashed var(--line-subtle);
  }

  .service-item-title {
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.35;
  }

  .service-item-desc {
    font-size: 0.98rem;
    color: var(--muted);
  }

  .group-footer {
    padding-block-start: 0.85rem;
    border-block-start: 1px solid var(--line-subtle);
    display: flex;
    font-size: 0.95rem;
    font-weight: 600;
  }

  /* Espacios para fotos */
  .photo-slots {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-block-start: 2rem;
  }

  .photo-slot {
    background-color: var(--panel);
    background-image: repeating-linear-gradient(
      -45deg,
      transparent 0 10px,
      color-mix(in oklab, var(--line-subtle) 35%, transparent) 0 20px
    );
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.88rem;
  }

  .photo-slot .ico {
    inline-size: 1.85rem;
    block-size: 1.85rem;
    color: var(--link);
  }

  /* Documentación y mediciones */
  .docs {
    background-color: var(--band);
    color: var(--band-fg);
  }

  .docs .head p,
  .docs .eyebrow {
    color: var(--band-muted);
  }

  .docs-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: center;
    margin-block-end: 2rem;
  }

  .docs-top .head {
    margin: 0;
  }

  .doclist {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--doclist-gap, 1rem);
    background-color: var(--doclist-bg, transparent);
    border: var(--doclist-border, 0);
  }

  .doc {
    background-color: var(--band-2);
    border: var(--doc-border, 1px solid var(--band-line));
    border-radius: var(--radius-md);
    padding: 1.35rem;
    display: grid;
    grid-row: span 4;
    grid-template-rows: auto auto 1fr auto;
    grid-template-rows: subgrid;
    gap: 0.55rem;
  }

  .doc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .doc .ico {
    color: var(--accent-text);
    inline-size: 1.6rem;
    block-size: 1.6rem;
  }

  .doc .tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent-text);
    border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-box: trim-both cap alphabetic;
  }

  .doc h3 {
    font-size: 1.22rem;
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.25;
    text-transform: none;
    color: var(--band-fg);
  }

  .doc p {
    color: var(--band-muted);
    font-size: 0.98rem;
  }

  .doc-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--band-line);
    font-size: 0.95rem;
    font-weight: 600;
  }

  .doc-links > :only-child {
    margin-inline-start: auto;
  }

  .doc-links a:not(.btn) {
    color: var(--accent-text);
  }

  .incumbencias-note {
    margin-block-start: 1.5rem;
    padding: 1rem 1.2rem;
    background-color: var(--band-2);
    border: 1px solid var(--band-line);
    border-inline-start: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--band-muted);
    font-size: 0.95rem;
    max-inline-size: none;
  }

  /* Cotizador */
  .quote {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
  }

  form#qf {
    background-color: var(--panel);
    border: 1px solid var(--line);
    border-block-start: var(--card-top-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 1.45rem;
    min-inline-size: 0;
  }

  .preview {
    background-color: var(--band);
    color: var(--band-fg);
    border: 1px solid var(--band-line);
    border-block-start: 3px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 1.45rem;
    min-inline-size: 0;
  }

  .fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .f {
    display: grid;
    gap: 0.35rem;
    min-inline-size: 0;
  }

  .f[hidden] {
    display: none;
  }

  .f.full {
    grid-column: 1 / -1;
  }

  label,
  legend {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--fg);
  }

  input,
  select,
  textarea {
    font: inherit;
    font-size: 1rem;
    color: var(--fg);
    background-color: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding-block: 0.65rem;
    padding-inline: 0.75rem;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 3rem;
  }

  @media (pointer: coarse) {
    input,
    select,
    textarea {
      min-block-size: 3.25rem;
    }
  }

  input:invalid:user-invalid,
  select:invalid:user-invalid,
  textarea:invalid:user-invalid {
    border-color: var(--err);
    outline: 2px solid var(--err);
  }

  textarea {
    min-block-size: 5.5rem;
    resize: vertical;
  }

  fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
  }

  .chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-block-start: 0.35rem;
  }

  .chips label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0;
    display: inline-flex;
    align-items: safe center;
    gap: 0.45rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    min-block-size: 2.85rem;
    cursor: pointer;
    background-color: var(--bg);
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .chips label:has(input:checked) {
    border-color: var(--accent);
    background-color: color-mix(in oklab, var(--accent) 18%, var(--bg));
    font-weight: 600;
  }

  @supports not selector(:has(*)) {
    .chips label.is-checked {
      border-color: var(--accent);
      font-weight: 600;
    }
  }

  .chips input {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    min-block-size: 0;
    padding: 0;
    margin: 0;
    accent-color: var(--accent);
  }

  .quote-result-box {
    background-color: var(--band-2);
    border: 1px solid var(--band-line);
    border-inline-start: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1rem;
    margin-block-end: 1rem;
    font-size: 0.9rem;
    color: var(--band-fg);
  }

  .quote-result-box strong {
    display: block;
    margin-block-end: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-text);
  }

  .quote-pricing {
    display: grid;
    gap: 0.75rem;
  }

  .quote-range-box {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .quote-range-label {
    font-size: 0.82rem;
    color: var(--band-muted);
  }

  .quote-range-value {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--band-fg);
    letter-spacing: -0.01em;
  }

  .quote-discount-card {
    background-color: color-mix(in oklab, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--band-line));
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    display: grid;
    gap: 0.35rem;
  }

  .quote-discount-header {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .quote-discount-value {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--band-fg);
  }

  .quote-discount-cond {
    font-size: 0.85rem;
    color: var(--band-fg);
    margin: 0;
    line-height: 1.35;
  }

  .quote-discount-expiry {
    font-size: 0.78rem;
    color: var(--band-muted);
    margin: 0;
  }

  .quote-disclaimer {
    font-size: 0.82rem;
    color: var(--band-muted);
    margin: 0;
    line-height: 1.4;
    font-style: italic;
  }

  .quote-source {
    font-size: 0.78rem;
    font-family: var(--font-mono);
    color: var(--band-muted);
    margin: 0;
  }

  input.is-invalid,
  select.is-invalid {
    border-color: #e53e3e !important;
    outline: 2px solid color-mix(in oklab, #e53e3e 40%, transparent) !important;
  }

  .preview h3 {
    color: var(--band-fg);
    margin-block-end: 0.25rem;
  }

  .preview .note {
    color: var(--band-muted);
    font-size: 0.85rem;
    margin-block-end: 0.9rem;
  }

  pre.msg-box {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    background-color: light-dark(#FFFFFF, rgba(0, 0, 0, 0.28));
    color: var(--band-fg);
    border: 1px solid var(--band-line);
    border-radius: var(--radius-sm);
    padding: 0.95rem;
    margin-block: 0 1rem;
    min-block-size: 9.5rem;
    max-block-size: 16rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  pre.msg-box code {
    font-family: inherit;
  }

  .actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
  }

  .preview .actions .btn.ghost {
    color: var(--band-fg);
    border-color: var(--band-line);
  }

  .status {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--ok, #4CC38A);
    min-block-size: 1.3em;
    margin-block-start: 0.65rem;
  }

  .status.is-error,
  .status[data-type="error"] {
    color: var(--err, #B3261E);
  }

  /* Contacto */
  .contact-band {
    background-color: var(--contact-bg, var(--accent));
    color: var(--contact-fg, var(--accent-ink));
    padding-block: 2.75rem;
    border-block-end: 0;
  }

  .contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
  }

  .contact-main {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
  }

  .contact h2 {
    font-size: clamp(1.9rem, 1.4rem + 2.5vw, 2.6rem);
  }

  .contact .eyebrow {
    color: inherit;
  }

  .contact .btn {
    background-color: var(--contact-btn-bg, var(--band));
    border-color: var(--contact-btn-bg, var(--band));
    color: var(--contact-btn-fg, #FFFFFF);
    margin-block-start: 0.4rem;
  }

  .contact .btn:focus-visible {
    clip-path: none;
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
  }

  .contact-data {
    margin: 0;
    padding: 0.4rem 1.35rem;
    background-color: var(--band);
    color: var(--band-fg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
  }

  .contact-data > div {
    display: grid;
    gap: 0.1rem;
    padding-block: 0.85rem;
  }

  .contact-data > div + div {
    border-block-start: 1px solid var(--band-line);
  }

  .contact-data dt {
    font-size: 0.88rem;
    color: var(--band-muted);
  }

  .contact-data dd {
    margin: 0;
    font-weight: 500;
  }

  .contact-data a {
    color: var(--accent-text);
    font-weight: 600;
  }

  /* Pie de página */
  footer {
    background-color: var(--band);
    color: var(--band-muted);
    padding-block: 3rem 1.5rem;
    font-size: 0.95rem;
    border-block-start: 1px solid var(--band-line);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-block-end: 2rem;
  }

  .footer-brand p {
    margin-block-start: 0.85rem;
  }

  footer strong {
    color: var(--band-fg);
  }

  .footer-links {
    list-style: none;
    padding: 0;
    margin-block: 0.65rem 0;
    display: grid;
    gap: 0.45rem;
  }

  .footer-links a {
    color: var(--band-muted);
    text-decoration: none;
  }

  .footer-links a:hover {
    color: var(--accent-text);
  }

  .footer-bottom {
    padding-block-start: 1.2rem;
    border-block-start: 1px solid var(--band-line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.88rem;
    padding-inline-end: 3.5rem;
  }

  /* Chat de triage flotante */
  .chat-widget {
    position: fixed;
    inset-inline-end: max(0.9rem, env(safe-area-inset-right, 0px));
    inset-block-end: max(0.9rem, env(safe-area-inset-bottom, 0px));
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
  }

  .chat-toggle {
    display: inline-flex;
    align-items: safe center;
    gap: 0.55rem;
    background-color: var(--accent);
    color: var(--accent-ink);
    border: 2px solid var(--band);
    border-radius: var(--radius-btn);
    padding: 0.7rem 1.1rem;
    min-block-size: 3rem;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: var(--shadow-float);
  }

  .chat-panel {
    inline-size: min(24rem, calc(100dvw - 1.8rem));
    block-size: min(34rem, calc(100dvh - 6rem));
    background-color: var(--panel);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    display: flex;
    flex-direction: column;
    overflow: clip;
    padding-block: 0;
    border-block-end-width: 1px;
  }

  .chat-panel[hidden] {
    display: none !important;
  }

  .chat-header {
    background-color: var(--band);
    color: var(--band-fg);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    border-block-end: 2px solid var(--accent);
  }

  .chat-header-title {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: grid;
  }

  .chat-header-title small {
    font-size: 0.68rem;
    color: var(--accent-text);
    font-weight: 400;
  }

  .chat-close {
    background: transparent;
    border: 1px solid var(--band-line);
    border-radius: var(--radius-sm);
    color: var(--band-fg);
    cursor: pointer;
    inline-size: 2rem;
    block-size: 2rem;
    display: grid;
    place-items: center;
    font-size: 1rem;
  }

  .chat-close:hover {
    border-color: var(--accent);
    color: var(--accent-text);
  }

  .chat-messages {
    padding: 0.9rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1 1 0;
    min-block-size: 0;
    background-color: var(--bg);
  }

  .chat-bubble {
    max-inline-size: 88%;
    overflow-wrap: anywhere;
    white-space: pre-line;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .chat-bubble.bot {
    background-color: var(--panel);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--accent);
    align-self: flex-start;
  }

  .chat-bubble.user {
    background-color: var(--band);
    color: var(--band-fg);
    align-self: flex-end;
  }

  .chat-options {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: balance;
    gap: 0.4rem;
    margin-block-start: 0.2rem;
  }

  .chat-opt-btn {
    background-color: var(--panel);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    cursor: pointer;
  }

  .chat-opt-btn:hover {
    border-color: var(--accent);
    background-color: var(--accent);
    color: var(--accent-ink);
  }

  .chat-header,
  .chat-form {
    flex: none;
  }

  .chat-form {
    display: flex;
    gap: 0.45rem;
    padding: 0.65rem;
    background-color: var(--panel);
    border: 0;
    border-block-start: 1px solid var(--line);
  }

  .chat-form input {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 2.5rem;
    padding: 0.45rem 0.65rem;
    font-size: 1rem;
  }

  /* Páginas internas */
  .breadcrumb {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--band-muted);
    margin-block-end: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
  }

  .breadcrumb a {
    color: var(--accent-text);
    text-decoration: none;
  }

  .service-hero {
    padding-block: 2.2rem 2.6rem;
  }

  .service-hero h1 {
    font-size: clamp(2.15rem, 1.4rem + 3.5vw, 3.6rem);
    color: var(--band-fg);
    max-inline-size: 26ch;
  }

  .service-hero .lead {
    color: var(--band-muted);
    max-inline-size: 62ch;
    margin-block-start: 0.95rem;
    font-size: 1.05rem;
  }

  .service-hero .cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-block-start: 1.4rem;
  }

  .service-nav {
    background-color: var(--bg-alt);
    border-block-end: 1px solid var(--line-subtle);
    padding-block: 0.85rem;
  }

  .service-nav .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
  }

  .service-nav span {
    font-weight: 600;
    font-size: 0.92rem;
  }

  .service-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .service-nav-links a {
    padding: 0.3rem 0.7rem;
    font-size: 0.92rem;
    color: var(--fg);
    text-decoration: none;
    background-color: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }

  .service-nav-links a:hover {
    border-color: var(--accent);
  }

  .service-nav-links a[aria-current="page"] {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
  }

  .detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .card {
    background-color: var(--panel);
    border: 1px solid var(--line);
    border-block-start: var(--card-top-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 1.35rem;
    display: grid;
    gap: 0.75rem;
    align-content: start;
  }

  .card ul {
    margin: 0;
    padding-inline-start: 1.15rem;
    display: grid;
    gap: 0.5rem;
  }

  .card > .btn {
    justify-self: end;
  }

  .detail-grid + .detail-grid {
    margin-block-start: 1.75rem;
  }

  .faq-list {
    display: grid;
    gap: 0.75rem;
  }

  .faq-item {
    background-color: var(--panel);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
  }

  .faq-item summary {
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
  }

  .faq-item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.25s ease, content-visibility 0.25s ease allow-discrete;
  }

  .faq-item[open]::details-content {
    block-size: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .faq-item::details-content {
      transition: none !important;
    }
  }

  .faq-item p {
    margin-block-start: 0.65rem;
    color: var(--muted);
  }

  /* Detalles propios del estilo Instrumental Fluke */
  .art {
    border: 2px solid var(--accent);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
  }

  .art::before {
    color: var(--art-accent);
    font-weight: 600;
  }

  .doc {
    clip-path: var(--card-clip);
  }

  .doc {
    border-block-start: 3px solid var(--accent);
  }

  @media (min-width: 40rem) {
    .groups,
    .doclist,
    .fields,
    .photo-slots,
    .detail-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .chips {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 24rem) {
    .chat-toggle {
      padding: 0.65rem;
      min-block-size: 2.75rem;
      inline-size: 2.75rem;
      justify-content: center;
    }
    .chat-toggle span {
      display: none;
    }
  }

  @media (max-width: 23rem) {
    .wrap {
      padding-inline: 0.6rem;
    }
    .top {
      gap: 0.35rem;
      padding-block: 0.45rem;
    }
    .logo {
      gap: 0.45rem;
    }
    .logo svg {
      inline-size: 2rem;
      block-size: 2.2rem;
    }
    .logo .w {
      padding-inline-start: 0.5rem;
    }
    .logo .w b {
      font-size: 1.4rem;
    }
    .logo .w span {
      font-size: 0.54rem;
    }
    .header-actions {
      gap: 0.3rem;
    }
    .icon-btn {
      inline-size: 2.25rem;
      block-size: 2.25rem;
    }
  }

  @media (min-width: 54rem) {
    .menu-toggle {
      display: none;
    }
    .top {
      align-items: center;
    }
    .logo {
      order: 1;
    }
    .main-nav {
      order: 2;
      margin-inline-start: auto;
      display: flex;
      inline-size: auto;
      flex-direction: row;
      align-items: center;
      gap: 1.5rem;
      padding-block-start: 0;
      margin-block-start: 0;
      border-block-start: 0;
    }
    .header-actions {
      order: 3;
    }
    .hero {
      grid-template-columns: 1.15fr 0.85fr;
      gap: 2.75rem;
    }
    
.doclist {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .docs-top {
      grid-template-columns: 1.2fr 0.8fr;
    }
    .quote {
      grid-template-columns: 1.12fr 0.88fr;
    }
    .preview {
      position: sticky;
      inset-block-start: 5.2rem;
    }
    .contact {
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }
    .footer-bottom {
      padding-inline-end: 11rem;
    }
    .footer-grid {
      grid-template-columns: 1.3fr 1.1fr 0.8fr 1.3fr;
    }
  }
}

/* Vida en las ilustraciones: estado final por defecto; las animaciones solo se arman con JS */
@layer components {
  .art-hint {
    margin-block: 0.55rem 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--art-muted);
    text-align: center;
  }

  .status-now {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-block: 0 1rem;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .status-now[hidden] { display: none; }

  .status-now .dot {
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-radius: 50%;
    margin-block-start: 0.4rem;
    flex: none;
    background: var(--muted);
  }

  .status-now.on .dot {
    background: var(--ok);
    animation: pulso-dot 2.4s ease-out infinite;
  }

  @keyframes pulso-dot {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
    100% { box-shadow: 0 0 0 0.6rem transparent; }
  }

  .art svg g[role="button"] { outline: none; }
  .art svg g[role="button"]:focus-visible { outline: 2px solid var(--art-secondary); outline-offset: 2px; }

  .art .tm { transition: transform 0.35s cubic-bezier(.3,1.4,.5,1), fill 0.2s; transform-box: fill-box; }
  .art .tm.off { transform: translateY(0.8rem); fill: var(--art-muted); }
  .art .led { animation: led 2.4s steps(1) infinite; }
  .art .flow { animation: fluir 2.4s linear infinite; }

  @keyframes led { 50% { opacity: 0.25; } }
  @keyframes fluir { to { stroke-dashoffset: -20; } }

  .art .needle {
    transform-origin: 118px 126px;
    transform: rotate(-52deg);
  }

  .art .needle-jitter {
    transform-origin: 118px 126px;
    animation: temblor 3s ease-in-out 1.8s infinite alternate;
  }

  @keyframes temblor {
    from { transform: rotate(-1.2deg); }
    to { transform: rotate(1.2deg); }
  }

  /* Estado inicial (solo si JS lo arma): todo apagado hasta entrar en pantalla */
  .art svg.armed .bar { transform: scaleX(0); transform-origin: left; transform-box: fill-box; }
  .art svg.armed .wire { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .art svg.armed .tm:not(.off) { transform: translateY(0.8rem); }
  .art svg.armed .needle { transform: rotate(-90deg); }
  .art svg.armed .needle-jitter { animation-play-state: paused; }
  .art svg.armed .flow { opacity: 0; }

  .art svg.armed.live .bar { transform: none; transition: transform 0.7s ease-out; }
  .art svg.armed.live .wire { stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s ease-out 0.5s; }
  .art svg.armed.live .tm:not(.off) { transform: none; transition-delay: calc(1.1s + var(--i, 0) * 0.15s); }
  .art svg.armed.live .needle { transform: rotate(-52deg); transition: transform 1.6s cubic-bezier(.34,1.56,.64,1) 0.3s; }
  .art svg.armed.live .needle-jitter { animation-play-state: running; }
  .art svg.armed.live .flow { opacity: 1; transition: opacity 0.5s 1.6s; }

  .art svg.pausada *, .art svg.pausada .needle-jitter { animation-play-state: paused !important; }

  @media (prefers-reduced-motion: reduce) {
    .art .led, .art .flow, .art .needle-jitter { animation: none; }
    .art .tm, .art .needle { transition: none !important; }
  }

  .reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.5s; }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
}