/* ═══════════════════════════════════════════════════════════════════════
   FICHA DE SERIE — la piel de las 24 páginas de serie

   Se apoya entera en los tokens de `cara-nueva.css`: ni un color literal, ni
   una tipografía propia. Al pasar de la portada a la ficha no se cambia de
   época, que era el primer criterio del bloque 11.
   ═══════════════════════════════════════════════════════════════════════ */

@layer base {
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

@layer layout {
  main { display: grid; gap: var(--space-3xl); padding-bottom: var(--space-3xl); }
  .sec, .fh { width: min(100% - var(--container-padding) * 2, var(--container)); margin-inline: auto; }
  .sec__cab { max-width: 62ch; margin-bottom: var(--space-lg); }
  .sec__eyebrow {
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--brand-text);
    display: flex; align-items: center; gap: 11px; margin: 0 0 12px;
  }
  .sec__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--brand); flex: none; }
  .sec__t { font-size: var(--fs-2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); margin: 0; }
  .sec__lead { color: var(--muted); margin: 12px 0 0; max-width: 60ch; }
}

/* ── el encabezado de la serie ── */
@layer componentes {
  .fh { padding-top: var(--space-xl); }
  .fh__migas {
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-lg);
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .fh__migas a { color: var(--muted); }
  .fh__migas a:hover { color: var(--brand-text); }
  .fh__migas b { color: var(--text); font-weight: 600; }

  .fh__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-2xl); align-items: center; }
  @media (max-width: 900px) { .fh__grid { grid-template-columns: minmax(0, 1fr); } }

  .fh__eyebrow {
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--brand-text); margin: 0 0 14px;
  }
  .fh__t { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); margin: 0; }
  .fh__lead { color: var(--muted); font-size: var(--fs-5); margin: 16px 0 0; max-width: 52ch; }

  /* cuatro columnas fijas en ancho: con `auto-fit` las cuatro specs caían 3+1
     y la fila corta dejaba un hueco vacío que se leía como dato que falta */
  .fh__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
               margin: var(--space-lg) 0 0; background: var(--line); border: 1px solid var(--line); }
  .fh__specs > div { background: var(--bg); padding: 12px 14px; }
  .fh__specs dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
                  text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
  .fh__specs dd { margin: 0; font-weight: 600; font-size: 15px; }
  @media (min-width: 620px) { .fh__specs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .fh__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-lg); }
  .fh__media { display: grid; place-items: center; }
  /* 🔴 LA FOTO SE LIMITA POR ALTO, NO POR ANCHO. Con `max-width: 460px` el alto
     lo decidía la proporción de cada foto: la de fluidity 01F es apaisada
     (1448x1086) y daba 460x345; la de 09F es vertical (3907x5569) y daba
     460x656 — casi el doble, y por eso su ficha se veía desproporcionada
     contra la que Mario tomó de referencia.

     Fijando el ALTO, cualquier proporción ocupa el mismo bloque y las 24
     landings quedan normalizadas. Los 345 px salen de medir la referencia
     (aignep.la/mx/fluidity/serie-01f.html) a 1440 px de ancho, así que esa
     ficha no cambia: el clamp da exactamente su valor actual. */
  .fh__media { min-height: clamp(240px, 24vw, 345px); }
  .fh__foto {
    width: auto; height: auto;
    max-width: min(100%, 460px);
    max-height: clamp(240px, 24vw, 345px);
    object-fit: contain;   /* `fill` deformaría en cuanto el alto mande */
  }
}

/* ── el plano acotado y su tabla ──
   El dibujo manda en ancho y la tabla va debajo, no al lado: una tabla de ocho
   cotas en media columna se lee en dos líneas por celda. */
@layer componentes {
  .med { border-top: 1px solid var(--line); padding-top: var(--space-lg); margin-top: var(--space-xl); }
  .med:first-of-type { margin-top: var(--space-lg); }
  .med__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-bottom: var(--space-md); }
  .med__t { font-size: var(--fs-4); margin: 0; }
  .med__tam, .med__variante {
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--muted); margin: 0;
  }
  .med__variante { border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 9px; }

  /* 🔴 El dibujo va sobre BLANCO siempre, también en tema oscuro. Un plano
     técnico se dibuja con trazo negro fino, y el catálogo no trae versión
     clara: invertirlo con un filtro deja las cotas grises sobre gris y el
     rayado de la sección desaparece. El papel del plano es papel. */
  .med__fig {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: clamp(10px, 2vw, 20px); overflow-x: auto;
  }
  .med__dibujo { width: 100%; height: auto; display: block; min-width: 460px; }

  .med__tabla-caja { overflow-x: auto; margin-top: var(--space-md); }
  .med__tabla, .tabla-ficha { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
  .med__tabla th, .med__tabla td, .tabla-ficha th, .tabla-ficha td {
    text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
  }
  .med__tabla thead th {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); font-weight: 400; border-bottom: 1px solid var(--line-strong);
  }
  .med__tabla tbody th, .tabla-ficha th { font-weight: 600; }
  .tabla-ficha th { width: 40%; color: var(--muted); font-weight: 400; }
  .med__pie { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin: 10px 0 0; }

  /* ── el resaltado de cota ──
     La columna y su marca en el dibujo se encienden a la vez. Va con :hover y
     con :focus-within, para que también funcione tabulando. */
  .cotas circle { fill: var(--brand); fill-opacity: 0; stroke: var(--brand); stroke-opacity: 0;
                  transition: fill-opacity .16s, stroke-opacity .16s; }
  .med.is-marcando .cotas circle.is-viva { fill-opacity: .22; stroke-opacity: .9; stroke-width: 1; }
  .med__tabla [data-cota] { cursor: default; }
  /* 🔴 El resaltado era `background: var(--chip-hl)` y ese token es el ROJO de
     marca a plena opacidad: la columna se encendía tapando sus propios
     valores, o sea que señalar el dato lo hacía ilegible. Va como un velo del
     mismo rojo, y el texto sube a color de tinta en vez de bajar a blanco. */
  .med__tabla [data-cota].is-viva {
    background: color-mix(in srgb, var(--brand) 13%, transparent);
    color: var(--text); box-shadow: inset 2px 0 0 var(--brand);
  }
  .med__tabla thead [data-cota].is-viva { color: var(--brand-text); }
}

@layer componentes {
  .uso__lista { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 var(--space-lg); list-style: none; }
  .uso__lista li {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
    border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 13px; color: var(--muted);
  }
  .uso__ventajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-lg); }
  .vent h3 { font-size: var(--fs-5); margin: 0 0 8px; }
  .vent p { color: var(--muted); margin: 0; }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .cotas circle { transition: none; }
  }
}

/* ── la lupa ──
   El botón nace oculto y lo revela `lupa.js`: sin JavaScript no hay botón que
   no haga nada. Es la regla del proyecto —nada se esconde esperando a un
   script— aplicada al revés y a propósito: lo que se esconde es el CONTROL de
   una mejora, no el contenido, y el contenido está entero debajo. */
@layer componentes {
  .med__fig, .corte__fig { position: relative; }
  .lupa__abrir {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    border: 1px solid var(--line-strong); border-radius: 999px;
    padding: 6px 13px; cursor: pointer; backdrop-filter: blur(6px);
    transition: color .16s, border-color .16s;
  }
  .lupa__abrir:hover { color: var(--text); border-color: var(--brand); }
  .lupa__abrir:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  .lupa {
    width: min(96vw, 1400px); max-width: none; max-height: 92vh;
    padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
    background: var(--bg); color: var(--text); overflow: hidden;
  }
  .lupa::backdrop { background: rgb(0 0 0 / .62); backdrop-filter: blur(3px); }
  .lupa__cab {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
  }
  .lupa__t { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
             text-transform: uppercase; color: var(--muted); margin: 0; }
  .lupa__cerrar {
    background: none; border: 1px solid var(--line-strong); border-radius: 50%;
    width: 32px; height: 32px; font-size: 19px; line-height: 1; color: var(--muted); cursor: pointer;
  }
  .lupa__cerrar:hover { color: var(--text); border-color: var(--brand); }
  .lupa__cerrar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  /* el plano vuelve a su papel blanco también dentro del diálogo */
  .lupa__cuerpo { padding: clamp(10px, 2vw, 22px); overflow: auto; max-height: calc(92vh - 62px); }
  .lupa__cuerpo .med__dibujo { background: #fff; min-width: 0; }
  .lupa__cuerpo > * { width: 100%; height: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════
   LA GALERÍA DIGITAL — pestañas sin JavaScript, planos plegados, 3D a demanda
   ═══════════════════════════════════════════════════════════════════════ */
@layer componentes {
  /* el tercer nivel del hero: un enlace con icono, no una tercera píldora.
     Decidido con Mario el 7 sep 2026: tres botones seguidos le comen fuerza al
     rojo, y la regla es un solo CTA fuerte por vista. */
  .fh__link {
    display: inline-flex; align-items: center; gap: 8px; align-self: center;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); padding: 10px 4px;
    border-bottom: 1px solid transparent; transition: color .18s, border-color .18s;
  }
  .fh__link:hover { color: var(--brand-text); border-color: var(--brand); }
  .fh__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  .fh__link svg { flex: none; }

  /* ── las pestañas ── */
  .gal__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .gal__tabs {
    display: flex; gap: 4px; border-bottom: 1px solid var(--line-strong);
    margin-bottom: var(--space-lg); overflow-x: auto;
  }
  .gal__tab {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); padding: 12px 16px;
    border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
    white-space: nowrap; transition: color .16s, border-color .16s;
  }
  .gal__tab:hover { color: var(--text); }
  /* 🔴 la pestaña activa y su panel se eligen con :has(), sin script. Y solo
     se oculta algo donde :has() existe: en un navegador sin él, los tres
     paneles se ven en secuencia. Nada se esconde sin llave. */
  @supports selector(:has(a)) {
    .gal:has(.gal__radio:checked) .gal__panel { display: none; }
    .gal:has(#gal-planos:checked) [data-panel="planos"],
    .gal:has(#gal-corte:checked)  [data-panel="corte"],
    .gal:has(#gal-3d:checked)     [data-panel="3d"] { display: block; }
    .gal:has(#gal-planos:checked) [for="gal-planos"],
    .gal:has(#gal-corte:checked)  [for="gal-corte"],
    .gal:has(#gal-3d:checked)     [for="gal-3d"] { color: var(--text); border-color: var(--brand); }
  }
  .gal__radio:focus-visible + .gal__tabs [for] { outline: 2px solid var(--focus); outline-offset: -2px; }
  .gal__lead { color: var(--muted); max-width: 62ch; margin: 0 0 var(--space-md); }

  /* ── los planos, plegados ── */
  .med { border-top: 1px solid var(--line); margin: 0; padding: 0; }
  .med:last-of-type { border-bottom: 1px solid var(--line); }
  .med__cab {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px;
    padding: 16px 0; cursor: pointer; list-style: none; margin: 0;
  }
  .med__cab::-webkit-details-marker { display: none; }
  .med__cab:hover .med__t { color: var(--brand-text); }
  .med__cab:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
  .med__flecha {
    margin-left: auto; width: 9px; height: 9px; flex: none; align-self: center;
    border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg); transition: transform .22s;
  }
  .med[open] .med__flecha { transform: rotate(-135deg); }
  .med__cuerpo { padding: 0 0 var(--space-lg); }

  /* ── el 3D ── */
  .g3d {
    position: relative; display: grid; place-items: center; min-height: 420px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md);
    overflow: hidden;
  }
  .g3d__poster { width: min(100%, 420px); height: auto; opacity: .55; filter: saturate(.7); transition: opacity .3s; }
  .g3d__abrir {
    position: absolute; inset: auto auto 50% 50%; transform: translate(-50%, 50%);
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--white); background: var(--brand); border: 0; border-radius: 999px;
    padding: 14px 26px; cursor: pointer; box-shadow: var(--shadow-card);
  }
  .g3d__abrir:hover { filter: brightness(1.08); }
  .g3d__abrir:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  .g3d__nota {
    position: absolute; left: 14px; bottom: 12px; margin: 0;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted);
  }
  .g3d model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; }
  .g3d.is-cargando .g3d__abrir { opacity: .5; pointer-events: none; }
  .g3d.is-listo .g3d__poster, .g3d.is-listo .g3d__abrir { display: none; }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .med__flecha { transition: none; }
  }
}

/* ── la calculadora de caudal ── */
@layer componentes {
  /* nace `hidden` y lo revela `caudal.js`: sin JavaScript no se ofrece un
     formulario que no calcularía nada. Lo que sí queda es el desplegable de
     fórmulas de abajo, que es donde está la información. */
  .cau { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
         gap: var(--space-xl); align-items: start; }
  @media (max-width: 820px) { .cau { grid-template-columns: minmax(0, 1fr); } }

  .cau__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
                 gap: var(--space-md); }
  .cau__campo { display: grid; gap: 7px; }
  /* 🔴 `hidden` NO oculta un elemento que declara su propio `display`: el del
     agente de usuario es `display:none` con la especificidad más baja que
     existe, y cualquier regla de autor lo gana. Los campos de densidad y de
     volumen específico se veían con «aire» elegido, pidiendo datos que esa
     fórmula no usa. Es el mismo defecto que el propio wrapper de los artefactos
     previene con su `[hidden]{display:none!important}`. */
  .cau__campo[hidden] { display: none; }
  .cau__campo > span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .11em;
                       text-transform: uppercase; color: var(--muted); }
  .cau__campo > span i { font-style: normal; color: var(--brand-text); }
  .cau__campo select, .cau__campo input {
    font: inherit; font-size: 15px; padding: 11px 13px; width: 100%;
    color: var(--text); background: var(--bg); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); accent-color: var(--brand);
  }
  .cau__campo select:focus-visible, .cau__campo input:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px;
  }
  .cau__campo input:user-invalid { border-color: var(--brand); }

  .cau__res { background: var(--panel); border: 1px solid var(--line);
              border-radius: var(--radius-md); padding: var(--space-lg); }
  .cau__n { font-size: clamp(34px, 5vw, 52px); font-weight: 600; line-height: 1;
            letter-spacing: -.035em; margin: 0; font-variant-numeric: tabular-nums; }
  .cau__n small { font-size: .38em; font-weight: 400; color: var(--muted); letter-spacing: 0; }
  .cau__nota { color: var(--muted); font-size: 14px; margin: 14px 0 0; }
  .cau__nota b { color: var(--brand-text); font-weight: 600; }

  .cau__formula { margin-top: var(--space-xl); border-top: 1px solid var(--line); }
  .cau__formula > summary { padding: 16px 0; cursor: pointer; list-style: none;
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .11em;
    text-transform: uppercase; color: var(--muted); }
  .cau__formula > summary::-webkit-details-marker { display: none; }
  .cau__formula > summary::before { content: "+ "; color: var(--brand-text); }
  .cau__formula[open] > summary::before { content: "− "; }
  .cau__formula > summary:hover { color: var(--text); }
  .cau__formula-cuerpo { display: grid; gap: var(--space-md); max-width: 68ch;
                         padding-bottom: var(--space-lg); color: var(--muted); }
  .cau__formula-cuerpo b { color: var(--text); }
}

/* ── la compatibilidad química ── */
@layer componentes {
  .qui__buscar { display: block; margin-bottom: var(--space-md); max-width: 420px; }
  .qui__buscar[hidden] { display: none; }
  .qui__buscar input {
    font: inherit; font-size: 15px; padding: 12px 14px; width: 100%;
    color: var(--text); background: var(--bg); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
  }
  .qui__buscar input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  .qui__tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; }
  .qui__tabla th, .qui__tabla td {
    text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line);
  }
  .qui__tabla thead th {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); font-weight: 400;
    border-bottom: 1px solid var(--line-strong); white-space: nowrap;
  }
  .qui__tabla tbody th { font-weight: 400; }
  .qui__tabla tbody tr[hidden] { display: none; }
  .qui__tabla tbody tr:hover { background: var(--panel); }

  /* 🔴 El estado va con SÍMBOLO además de color: un semáforo de puntos deja
     fuera a quien no distingue rojo de verde, y aquí la respuesta —si un ácido
     se come la junta— no es decorativa. El color acompaña, no informa solo. */
  .qui__v { text-align: center; font-weight: 600; font-size: 15px; width: 1%; white-space: nowrap; }
  .qui__v--si { color: var(--success); }
  .qui__v--no { color: var(--brand-text); }
  .qui__v--consultar { color: var(--muted); }

  .qui__nada { color: var(--muted); padding: var(--space-md) 0; }
  .qui__nada[hidden] { display: none; }
  .qui__avisos { display: grid; gap: 10px; margin-top: var(--space-lg);
                 padding-top: var(--space-md); border-top: 1px solid var(--line);
                 color: var(--muted); font-size: 14px; max-width: 74ch; }
  .qui__avisos b { color: var(--text); font-weight: 600; }
}

/* la tabla de fluidos, plegada ── decisión de Mario, 7 sep 2026: 46 filas es
   mucha tabla para algo que se consulta puntualmente. Va en un <details>, que
   se abre sin JavaScript igual que los planos; escribir en el buscador la abre
   sola, porque si no se teclea y no pasa nada visible. */
@layer componentes {
  .qui__lista { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .qui__abrir {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
    padding: 16px 0; cursor: pointer; list-style: none;
  }
  .qui__abrir::-webkit-details-marker { display: none; }
  .qui__abrir::after {
    content: ""; margin-left: auto; width: 9px; height: 9px; flex: none; align-self: center;
    border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg); transition: transform .22s;
  }
  .qui__lista[open] .qui__abrir::after { transform: rotate(-135deg); }
  .qui__abrir:hover .qui__abrir-t { color: var(--brand-text); }
  .qui__abrir:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
  .qui__abrir-t { font-weight: 600; font-size: 16px; }
  .qui__abrir-n { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
                  color: var(--muted); }
  .qui__lista .med__tabla-caja { padding-bottom: var(--space-lg); }
}
@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .qui__abrir::after { transition: none; }
  }
}

/* ── 🔴 POR QUÉ EL PLIEGUE NO SE ANIMA ──
   Lo intenté con `::details-content` + `interpolate-size`, que es la receta
   que se recomienda hoy para animar un <details>, y la tabla de 46 fluidos
   NO ABRÍA: con el details en `open`, su `::details-content` se quedaba en
   `block-size: 0` y `content-visibility: hidden`, así que la tabla —1.828 px
   presentes en el DOM— no ocupaba nada y la sección medía lo mismo abierta que
   cerrada. Sin un solo error en consola, y con el mismo CSS que sí funcionaba
   en un pliegue de menos contenido: el defecto aparece con el contenido largo,
   que es justo donde el pliegue hace falta.

   Se quita la animación de los tres pliegues. Un <details> nativo abre y
   cierra siempre, en cualquier navegador y sin JavaScript; la animación era
   un adorno y estaba costando que la pieza funcionara. Vuelve el día que se
   pueda probar en más de un navegador, no antes. */


/* ═══════════════════════════════════════════════════════════════════════
   LOS CUATRO DATOS DEL HERO DE LA FICHA
   ═══════════════════════════════════════════════════════════════════════
   🔴 `.fh__datos` lo emite el motor genérico del molde y NINGUNA hoja lo
   vestía: salía como una `<dl>` cruda, etiqueta y valor apilados sin jerarquía.
   No lo detectó nada porque fluidity nunca lo pinta —su generador propio de
   fichas tiene otro hero—, así que la rama existía sin haberse visto nunca.
   Es la tercera vez en esta tanda: marcado que se escribe antes que su piel.
   ═══════════════════════════════════════════════════════════════════════ */
@layer components {
  .fh__datos {
    display: grid; gap: 1px; margin: var(--space-lg) 0 0; padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    background: var(--line); border: 1px solid var(--line);
    border-radius: var(--radius-sm); overflow: hidden;
  }
  .fh__datos > div { background: var(--bg); padding: 11px 14px; display: grid; gap: 3px; }
  .fh__datos dt {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
  }
  /* el valor es lo que se lee; tabular para que las cifras no bailen */
  .fh__datos dd {
    margin: 0; color: var(--text); font-size: 14.5px; font-weight: 600;
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   LA FICHA TÉCNICA Y «DÓNDE SE USA» DE LA PÁGINA DE PRODUCTO
   ═══════════════════════════════════════════════════════════════════════
   🔴 Otras dos secciones que el motor emite y que ninguna hoja vestía. Y ojo
   al nombre: `.fic` lo usan DOS componentes distintos —la sección de ficha de
   la PORTADA (`.fic__fila/__k/__v`, en portada.css) y esta de la página de
   PRODUCTO (`.fic__lista/__t`, aquí)—. Hoy no chocan porque ninguna página
   carga las dos hojas, pero es una colisión esperando a que alguien las junte.
   ═══════════════════════════════════════════════════════════════════════ */
@layer components {
  .fic, .uso { width: min(100% - var(--container-padding) * 2, var(--container));
               margin-inline: auto; padding-block: var(--space-2xl); }
  .fic__t, .uso__t { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em;
                     margin: 0 0 var(--space-lg); }

  .fic__lista {
    display: grid; gap: 1px; margin: 0; padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    background: var(--line); border: 1px solid var(--line);
    border-radius: var(--radius-md); overflow: hidden;
  }
  .fic__lista > div {
    background: var(--bg); padding: 15px 18px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  }
  .fic__lista dt {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); flex: none;
  }
  .fic__lista dd {
    margin: 0; text-align: right; color: var(--text);
    font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  /* ⚠️ `.uso__lista` NO se toca: ya estaba vestida más arriba (flex, línea 122)
     y la usan las fichas de fluidity, que están aprobadas. Escribí aquí una
     segunda regla con `grid` que la pisaba —mismo selector, más abajo, gana— y
     habría cambiado en silencio doce fichas publicadas. Antes de vestir una
     clase, mirar si ya lo está: el archivo tiene 600 líneas y el buscador
     cuesta un segundo. */

  @media (max-width: 520px) {
    /* apilado: a 375 la etiqueta y el valor competían y el valor quedaba en
       una columna de ~110 px — el defecto de los chips de spec truncados */
    .fic__lista > div { flex-direction: column; align-items: flex-start; gap: 4px; }
    .fic__lista dd { text-align: left; }
  }
}