/* ============================================================================
   Augurea · intaglio.css — the certificate furniture (security-printing motifs).
   Loaded globally from base.html (after trust.css). Per BRAND_BRIEF: what carries
   over from Intaglio is the FURNITURE, not new colors — seal, acta, guilloché,
   microprint, wax, all on the existing tokens. Light-only site; tokens only; AA
   holds. Gold is decorative line-work ONLY (guilloché ~0.5px at ~55% on paper) —
   never small text. Burgundy stays the scarce signature (seal, folio, wax).
   ============================================================================ */

/* ---- Wordmark lockup: seal (vector, currentColor) + live Bodoni caps --------
   currentColor makes the seal ink in the header and cream on the burgundy footer;
   the site is light-only so no prefers-color-scheme is involved. The logotype is
   live <b> text so it renders in real self-hosted Bodoni (SVG can't see @font-face). */
.brand{align-items:center;gap:9px;color:var(--ink)}
.brand b,.brand .brand-word{color:currentColor}
.brand-seal{display:inline-flex;flex:none;line-height:0}
.brand-seal svg{display:block}
.ftr .brand,.ftr .brand .brand-word,.ftr .brand span{color:var(--cream)}

/* ---- Seal-lituus mark on the originality trust block ------------------------
   The seal doubles as the verification stamp; beside the trust head it reads in
   burgundy — the one signature color the brief reserves for seal/CTA/folio. */
.trust{position:relative}
.trust-head{padding-right:42px}
.trust-seal{position:absolute;top:11px;right:12px;color:var(--brand-seal);opacity:.9;line-height:0}
.trust-seal svg{display:block}

/* ---- Acta de Verificación — the certificate ---------------------------------
   Double-bezel matting: an outer mat frame + hairline + inner paper plate, so it
   reads like a framed certificate rather than a flat card on the page. */
.acta{position:relative;margin:0 0 6px;background:var(--brand-mat);
  border:1px solid var(--line-2);border-radius:6px;padding:6px;   /* outer mat radius per BRAND_BRIEF (6px/3px concentric) */
  transition:box-shadow var(--dur-mid,.4s) var(--ease-out,ease),transform var(--dur-mid,.4s) var(--ease-out,ease)}
.acta:hover{box-shadow:var(--lift);transform:translateY(-3px)}   /* the framed certificate lifts on hover */
.acta-plate{position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:3px;padding:15px 18px 0}   /* inner plate radius (concentric with the 6px mat) */

.acta-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;
  border-bottom:1px solid var(--line)}
.acta-seal{flex:none;color:var(--ink);line-height:0}
.acta-seal svg{display:block}
.acta-title{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap}
.acta-guilloche{flex:1;min-width:20px;height:12px;overflow:hidden}
/* Guilloché hairline at ~0.6 stroke-opacity on white (BRAND_BRIEF); overrides the
   SVG's own opacity attr so the single value is authoritative. Draws in with the
   acta's scroll reveal — no separate stroke animation (faithful to the prospect). */
/* Oxblood engraving hairline (--brand-guillo -> --burgundy-deep). Kept a REDUCED-OPACITY
   HAIRLINE, never a solid mass: oxblood #4A1622 sits ~1.14:1 from signature burgundy, so
   weight+opacity (not hue) are what keep burgundy scarce. stroke set here so it resolves
   via CSS regardless of the SVG attribute. */
.acta-guilloche svg{display:block;width:100%;height:12px;opacity:.72;stroke:var(--brand-guillo)}

.acta-rows{margin:0;padding:11px 0 13px}
.acta-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:5px 0;font-size:13px;line-height:1.4}
.acta-row + .acta-row{border-top:1px solid var(--line)}
.acta-row dt{margin:0;flex:none;color:var(--warm-grey);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase}
.acta-row dd{margin:0;color:var(--ink);text-align:right;word-break:break-word}
/* folio = scarce burgundy; needs dd.acta-folio (0,2,1) to beat `.acta-row dd`
   (0,1,1), otherwise --ink wins and the folio loses its signature prominence. */
.acta-row dd.acta-folio{font-family:var(--code);color:var(--brand-folio);font-weight:500;letter-spacing:.02em}
.acta-estado.is-verified{color:var(--brand-verified)}

/* microprint band — banknote microtext as a section rule (static; no motion).
   diseno-12 (2026-09-16, via A): the band WAS --warm-grey #6E6E6E at opacity .72
   over --cream #F5F5F5. Alpha over an opaque parent is not a color, it is a
   COMPOSITE: 0.72*110 + 0.28*245 = #949494, which measures 2.78:1 against
   #F5F5F5 — under the 4.5:1 floor WCAG 2.1 SC 1.4.3 sets for text, i.e. the
   authenticity band read as dirt on the glass. The band stays TEXT (the
   microprint IS the argument), so the fix is ink and size, never shape:
   --muted #555555 with NO opacity measures 6.84:1 over --cream, and 9.5px
   replaces 8.5px. No new hex (tokens only), the brand and the wax seal are
   untouched, and the markup in templates/_acta.html is unchanged.
   The opacity must stay OFF: any alpha re-composites the ink and silently
   sinks the ratio again. catalog/test_acta_microprint.py reads these two
   declarations plus tokens.css, composites whatever it finds, and fails
   below 4.5:1 — so the next edit cannot repeat 2026's mistake quietly.

   TRACKING IS THE THIRD LEVER, and it is not cosmetic here. The band is
   white-space:nowrap + overflow:hidden, so it shows floor(width / advance)
   characters and clips the rest: bigger type shows LESS of the phrase. Per
   character, advance = (glyph + letter-spacing) × font-size, and the glyph is
   exactly 0.6em — measured on the shipped fonts/jetbrains-400-latin.woff2
   (unitsPerEm 1000, advanceWidth 600, identical for every glyph; the 'Courier
   New' fallback is 600/1000 too). Production 9ab90344 ran 8.5px at .34em =
   (0.6+0.34)×8.5 = 7.99px per character. Holding .34em at 9.5px would have
   cost 8.93px per character: +11.8% wider, i.e. ~10.5% of the visible phrase
   clipped away — worse in ES, the LONGER string (i18n acta_strip: 73 chars ES
   vs 71 EN, and mono means width is just chars × advance). On a 320px phone
   (plate content ≈ 288px) that is 36 characters shown instead of 32: the word
   FOLIO appears or it does not, and the band is precisely the copy that argues
   authenticity. .24em restores it:
   (0.6+.24)×9.5 = 7.98px, within 0.13% of production, so the band renders the
   same run of words it always did — only darker and bigger. The test pins
   that advance, so nobody can grow the type and silently truncate the phrase. */
.acta-strip{margin:0 -18px;padding:6px 18px;border-top:1px solid var(--line);
  background:var(--cream);overflow:hidden;white-space:nowrap}
.acta-strip span{font-family:var(--code);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted)}

/* the wax seal — the one theatrical object, pressed over the corner (opt-in). */
.acta-has-wax{margin-top:28px}
.acta-wax{position:absolute;top:-22px;right:-14px;transform:rotate(-8deg);line-height:0;
  filter:drop-shadow(0 3px 6px rgba(26,21,24,.22));pointer-events:none}
.acta-wax svg{display:block}
@media(max-width:520px){
  .acta-wax{top:-16px;right:-6px}
  .acta-wax svg{width:56px;height:56px}
}

@media(prefers-reduced-motion:reduce){
  .acta{transition:none}
  .acta:hover{box-shadow:none;transform:none}
}

/* Narrow-band yield (mobile overflow fix 2026-07-24, verified in-engine: the
   nowrap title set the acta's intrinsic min-content ~340px, wider than a 320px
   viewport — the framed certificate itself was pushing the PAGE sideways).
   The engraved title compresses before the page ever scrolls horizontally;
   never overflow-x:hidden, never wrap the certificate title mid-word. */
@media(max-width:400px){
  .acta-title{font-size:10px;letter-spacing:.08em}
  .acta-plate{padding:12px 12px 0}
  .acta{padding:4px}
}
@media(max-width:400px){
  /* The wax seal's decorative overhang (right:-14/-6px) is what ultimately
     dragged scrollWidth past the viewport at 320w (root offender, measured:
     .acta-wax right edge == document scrollWidth). At this band it tucks
     flush inside the frame -- the seal stays, the page never scrolls sideways. */
  .acta-wax{right:0;top:-14px}
}