/* ============================================================
   LEITMOTIV CONTENT — BRANDBOOK · STYLES
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* CORE */
  --navy: #111122;
  --navy-deep: #0A0A1A;
  --navy-soft: #1E1E36;
  --red: #C92438;        /* primary brand red */
  --red-bright: #F04655; /* accent on dark backgrounds */

  /* NEUTRALS */
  --ink: #14141C;
  --ink-2: #2A2A38;
  --gray-900: #1F1F2A;
  --gray-700: #4A4A55;
  --gray-500: #8A8A95;
  --gray-300: #C8C8CF;
  --gray-200: #E4E4E8;
  --gray-100: #F1F1F3;
  --gray-50:  #F8F8F9;
  --paper: #FAF9F6;       /* warm white, hint of editorial */
  --white: #FFFFFF;

  /* SEMANTIC */
  --bg: var(--paper);
  --surface: var(--white);
  --border: #E6E5E0;
  --border-strong: #1A1A28;
  --text: var(--ink);
  --text-mute: var(--gray-500);

  /* TYPE */
  --serif: 'Playfair Display', 'Times New Roman', serif;
  --serif-soft: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 4px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
img { max-width: 100%; display: block; }

/* ============== LOGO SYSTEM (CSS-rendered, scalable)
   v3.0 — Playfair Display 600, tracking -0.06em, small dot pegado al serif
   de la v. Matches the rasterized PNG/JPEG variants in descargas/png/. */
.lm-logo {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.06em;
  line-height: 0.85;
  /* inline-block + baseline keeps the wordmark on the surrounding text
     baseline and lets the inner .lm-dot use plain vertical-align math. */
  display: inline-block;
  vertical-align: baseline;
  white-space: nowrap;
}
.lm-logo .lm-dot {
  width: 0.12em; height: 0.12em;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
  /* Punto pegado al serif derecho de la "v" — actúa como el período final
     del wordmark "Leitmotiv.". El borde inferior del punto debe apoyarse
     EXACTAMENTE sobre la línea base, igual que el "." de la fuente. */
  margin-left: 0.02em;
  vertical-align: baseline;
  /* An empty inline-block's baseline IS its bottom margin edge, so this
     plants the bottom of the dot on the wordmark baseline. Do not add
     translateY / margin-bottom tweaks — they break the alignment. */
}
.lm-logo.on-dark { color: #fff; }
.lm-logo.on-dark .lm-dot { background: var(--red-bright); }

/* ----- Tagline lockup -----
   Wordmark con descriptor "BOUTIQUE PRODUCTION COMPANY & CONTENT STUDIO"
   en rojo, alineado bajo la línea base. */
.lm-logo-tagline {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  white-space: nowrap;
}
.lm-logo-tagline .lm-logo { display: block; }
.lm-logo-tagline .lm-tagline-line {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.085em;            /* relativo al cuerpo del wordmark */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 0.06em;
  line-height: 1;
}
.lm-logo-tagline.on-dark .lm-tagline-line { color: var(--red-bright); }

/* Lockup with descriptor "Content" — vertical variant */
.lm-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  white-space: nowrap;
}
.lm-lockup .lm-lockup-tagline {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--gray-500);
  letter-spacing: -0.005em;
  line-height: 1;
  font-size: 0.32em;       /* relative to .lm-logo font-size */
  align-self: flex-end;     /* right-aligned, sitting under "tiv." */
  margin-top: 0.05em;
  text-transform: none;
}
.lm-lockup.on-dark .lm-lockup-tagline { color: rgba(255,255,255,0.55); }

/* ============================================================
   ISOTIPO — vector, traced from master PNG.
   Tokens (override per-instance to recolor):
     --iso-bg      : circle fill
     --iso-letter  : "L" color
     --iso-dot     : red dot color (set transparent for knockout)
     --iso-ring    : ring stroke color (none by default)
     --iso-ring-w  : ring width as fraction of diameter (0–0.06)
   ============================================================ */
.lm-iso {
  --iso-bg: var(--navy);
  --iso-letter: #fff;
  --iso-dot: var(--red);
  --iso-ring: transparent;
  --iso-ring-w: 0;
  display: inline-block;
  position: relative;
  width: 1em; height: 1em;
  font-size: 200px;
  border-radius: 50%;
  background: var(--iso-bg);
  box-shadow: inset 0 0 0 calc(var(--iso-ring-w) * 1em) var(--iso-ring);
  flex-shrink: 0;
  vertical-align: middle;
}
/* Inline SVG mark (injected automatically by inline script in <head>). */
.lm-iso > svg.lm-iso-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}
.lm-iso > svg.lm-iso-svg .lm-iso-letter { fill: var(--iso-letter); }
.lm-iso > svg.lm-iso-svg .lm-iso-dot    { fill: var(--iso-dot); }
/* Legacy markup support — old <span class="lm-iso-L">L</span><span class="lm-iso-dot"></span>
   children are inert under the new vector implementation. Hide them so they don't double-render. */
.lm-iso .lm-iso-L,
.lm-iso .lm-iso-dot:not(svg .lm-iso-dot) { display: none; }

/* Variants */
.lm-iso.on-paper,
.lm-iso.on-sand    { --iso-bg: var(--navy); --iso-letter: #fff; --iso-dot: var(--red); }
.lm-iso.inverted   { --iso-bg: #fff; --iso-letter: var(--navy); --iso-dot: var(--red); }
.lm-iso.outline    { --iso-bg: transparent; --iso-letter: var(--navy); --iso-dot: var(--red);
                      --iso-ring: var(--navy); --iso-ring-w: 0.025; }
.lm-iso.outline-inv{ --iso-bg: transparent; --iso-letter: #fff; --iso-dot: var(--red);
                      --iso-ring: #fff; --iso-ring-w: 0.025; }
.lm-iso.mono-light { --iso-bg: #fff; --iso-letter: var(--navy); --iso-dot: var(--navy); }
.lm-iso.mono-dark  { --iso-bg: var(--navy); --iso-letter: #fff; --iso-dot: rgba(255,255,255,0.55); }
.lm-iso.knockout   { --iso-bg: var(--navy); --iso-letter: #fff; --iso-dot: rgba(255,255,255,0.18); }
.lm-iso.on-red     { --iso-bg: var(--red); --iso-letter: #fff; --iso-dot: var(--navy); }


.shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}
@media (max-width: 760px) {
  .shell { padding: 0 24px; }
}

/* ============== TOP NAV ============== */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 249, 246, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topnav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 56px;
  max-width: 1280px;
  margin: 0 auto;
}
.brandmark {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  color: var(--navy);
  letter-spacing: -0.04em;
  line-height: 1;
}
.brandmark .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--red); display: inline-block;
  margin-left: 1.5px;
  vertical-align: baseline;   /* dot bottom on text baseline */
}
.brandmark small {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-left: 6px;
}
.topnav nav {
  display: flex; gap: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topnav nav a {
  color: var(--gray-700);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
}
.topnav nav a:hover { color: var(--navy); }
.topnav nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--red);
}
@media (max-width: 900px) {
  .topnav nav { display: none; }
}

/* ============== HERO ============== */
.hero {
  position: relative;
  padding: 140px 0 120px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 30%, rgba(17,17,34,.04), transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(201,36,56,.03), transparent 60%);
  pointer-events: none;
}
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 32px;
  display: flex; align-items: center; gap: 12px;
}
.hero-eyebrow::before {
  content: ""; width: 32px; height: 1px; background: var(--red);
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(56px, 10vw, 144px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 28px;
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gray-500);
}
.hero h1 .accent {
  color: var(--red);
  font-style: normal;
}
/* Cover wordmark: round red dot on baseline (matches .lm-logo geometry) */
.hero h1 .hero-mark { display: inline-block; }
.hero h1 .hero-mark .hero-dot {
  display: inline-block;
  width: 0.12em; height: 0.12em;
  border-radius: 50%;
  background: var(--red);
  margin-left: 0.02em;
  vertical-align: baseline;
}
.hero-sub {
  font-family: var(--serif-soft);
  font-weight: 300;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 720px;
  margin: 0 0 56px;
  text-wrap: pretty;
}
.hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-top: 1px solid var(--border);
  padding-top: 24px;
  max-width: 900px;
}
.hero-meta b { display: block; color: var(--navy); margin-bottom: 4px; font-weight: 600; }
@media (max-width: 760px) {
  .hero-meta { grid-template-columns: 1fr 1fr; }
}

/* ============== SECTIONS ============== */
section[id] {
  padding: 120px 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 80px;
}
.section-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  margin-bottom: 72px;
  align-items: start;
}
.section-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
.section-num small {
  display: block;
  color: var(--gray-500);
  margin-top: 6px;
  font-weight: 400;
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 20px;
}
.section-head h2 em { font-style: italic; color: var(--gray-500); font-weight: 400; }
.section-head .lede {
  font-family: var(--serif-soft);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--gray-700);
  max-width: 600px;
}
@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; }
}

/* ============== UTILITIES ============== */
.divider {
  height: 1px;
  background: var(--border);
  margin: 56px 0;
}
.label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  padding: 4px 10px;
  border: 1px solid var(--red);
  border-radius: 999px;
}

/* ============== LOGO BLOCKS ============== */
.logo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.logo-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8%;
}
.logo-tile.dark { background: var(--navy); border-color: var(--navy); }
.logo-tile.taupe { background: #2C2A26; border-color: #2C2A26; } /* deep warm taupe */
.logo-tile.sand { background: #E8E2D4; border-color: #E8E2D4; } /* warm sand */
.logo-tile.gray { background: #ECEAE3; border-color: #ECEAE3; } /* warm light neutral */
.logo-tile.charcoal { background: #2A2A2C; border-color: #2A2A2C; } /* clean charcoal */
.logo-tile.paper { background: var(--paper); }
.logo-tile.charcoal .tile-label { color: rgba(255,255,255,.55); }
.logo-tile img { max-width: 80%; max-height: 60%; height: auto; object-fit: contain; }
.logo-tile .lm-logo { font-size: clamp(48px, 8vw, 96px); }
.logo-tile .tile-label {
  position: absolute; bottom: 14px; left: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.logo-tile.dark .tile-label, .logo-tile.taupe .tile-label { color: rgba(255,255,255,.55); }

/* Isotype tile — circle nearly fills the tile, label sits on the navy */
.logo-tile.iso-tile { padding: 6%; container-type: inline-size; }
.logo-tile .lm-iso.iso-fill {
  /* Circle diameter = font-size (because .lm-iso has width: 1em / height: 1em).
     Scale to fit the tile via container query. */
  font-size: 88cqi;
}
@supports not (font-size: 1cqi) {
  .logo-tile .lm-iso.iso-fill { font-size: clamp(140px, 22vw, 240px); }
}
.tile-label.on-iso { color: rgba(255,255,255,.7) !important; z-index: 2; }
@media (max-width: 760px) {
  .logo-grid { grid-template-columns: 1fr; }
}

/* Clearspace diagram */
.clearspace {
  background: var(--gray-50);
  border: 1px solid var(--border);
  padding: 60px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 380px;
}
.clearspace-inner {
  position: relative;
  display: inline-block;
}
.clearspace-inner img { display: block; max-width: 360px; }
.clearspace-guide {
  position: absolute;
  border: 1px dashed var(--red);
  pointer-events: none;
}
.clearspace-x {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--red);
  letter-spacing: 0.1em;
}

/* Misuse grid */
.misuse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.misuse {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 28px;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
  text-align: center;
}
.misuse .x-mark {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.misuse-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-700);
  margin-top: 16px;
}
.misuse img { max-width: 70%; }
@media (max-width: 760px) {
  .misuse-grid { grid-template-columns: 1fr 1fr; }
}

/* ============== COLOR ============== */
.color-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
@media (max-width: 760px) { .color-grid { grid-template-columns: 1fr; } }

.color-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.color-swatch {
  height: 280px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 28px 32px;
}
.color-swatch.navy { background: var(--navy); color: white; }
.color-swatch.red { background: var(--red); color: white; }
.color-swatch.paper { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--border); }
.color-swatch.ink { background: var(--ink); color: white; }
.color-swatch .name {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.color-swatch .name em { font-style: italic; opacity: 0.7; font-weight: 400; }
.color-swatch .role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}
.color-codes {
  padding: 20px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  font-family: var(--mono);
  font-size: 12px;
}
.color-codes .row { display: flex; justify-content: space-between; }
.color-codes .key { color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; }
.color-codes .val { color: var(--ink); }

/* Neutral scale */
.neutral-scale {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 24px;
}
.neutral-cell {
  aspect-ratio: 1 / 1.2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.neutral-cell .step { font-size: 11px; font-weight: 600; }
.neutral-cell .hex { opacity: 0.7; margin-top: 2px; }
@media (max-width: 760px) {
  .neutral-scale { grid-template-columns: repeat(4, 1fr); }
}

/* Color usage proportion */
.color-pie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
  align-items: center;
}
.proportion-bar {
  display: flex;
  height: 80px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.proportion-bar > div {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}

/* ============== TYPE ============== */
.type-pair {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.type-pair:last-child { border-bottom: none; }
.type-meta .tag-row {
  display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}
.type-meta h3 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.type-meta .role-line {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 24px;
}
.type-meta p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-700);
}
.type-meta .gfont-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  text-decoration: none;
  color: var(--navy);
  border-bottom: 1px solid var(--navy);
  padding-bottom: 2px;
}
.type-spec {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 14px;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.type-spec span { display: inline-flex; align-items: baseline; gap: 6px; }
.type-spec b { color: var(--navy); font-weight: 600; }

.type-sample-display {
  font-family: var(--serif);
  font-size: clamp(72px, 10vw, 144px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 32px;
}
.type-sample-display em { font-style: italic; font-weight: 400; color: var(--gray-500); }
.type-sample-h1 {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 12px;
}
.type-sample-body {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--gray-700);
  max-width: 640px;
}
.type-glyphs {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: 0.05em;
  color: var(--gray-300);
  margin-top: 24px;
}
.type-glyphs.sans { font-family: var(--sans); }

/* Scale demo */
.type-scale {
  margin-top: 24px;
  border-top: 1px solid var(--border);
}
.scale-row {
  display: grid;
  grid-template-columns: 80px 100px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.scale-row .scale-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.scale-row .scale-spec {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gray-500);
}
.scale-row .scale-sample { color: var(--navy); }

@media (max-width: 760px) {
  .type-pair { grid-template-columns: 1fr; gap: 24px; }
  .scale-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============== ICONOGRAPHY ============== */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.icon-tile {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface);
  padding: 16px;
  position: relative;
}
.icon-tile svg {
  width: 28px; height: 28px;
  color: var(--navy);
  stroke: var(--navy);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-tile .icon-name {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  margin-top: 12px;
  text-align: center;
}
@media (max-width: 760px) { .icon-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============== TONE OF VOICE ============== */
.voice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.voice-card {
  border: 1px solid var(--border);
  padding: 32px;
  border-radius: var(--radius);
  background: var(--surface);
  position: relative;
}
.voice-card.do { border-left: 3px solid var(--navy); }
.voice-card.dont { border-left: 3px solid var(--red); }
.voice-card .vlabel {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.voice-card.do .vlabel { color: var(--navy); }
.voice-card.dont .vlabel { color: var(--red); }
.voice-card blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.voice-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
.pillar {
  border-top: 2px solid var(--navy);
  padding-top: 24px;
}
.pillar .pname {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 8px;
}
.pillar .pdesc {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray-700);
}
@media (max-width: 760px) {
  .voice-grid, .voice-pillars { grid-template-columns: 1fr 1fr; }
}

/* ============== APPLICATIONS ============== */
.app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 760px) { .app-grid { grid-template-columns: 1fr; } }
.app {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.app-frame {
  aspect-ratio: 16 / 10;
  background: var(--gray-50);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.app-caption {
  padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.app-caption .name { color: var(--navy); text-transform: uppercase; font-weight: 600; }
.app-caption .meta { color: var(--gray-500); }

/* LinkedIn header live */
.app-li-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1584 / 396;
  background-size: cover;
  background-position: center;
}
.app-li-banner.light { background-image: url('assets/linkedin-header-light.png'); }
.app-li-banner.dark  { background-image: url('assets/linkedin-header-dark.png'); }

/* IG post mock */
.ig-post {
  width: 86%;
  aspect-ratio: 1;
  background: var(--paper);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: relative;
  padding: 36px 36px 28px;
}
.ig-post .ig-q {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2.5vw, 28px);
  line-height: 1.3;
  color: var(--navy);
  flex: 1;
  display: flex; align-items: center;
}
.ig-post.dark { background: var(--navy); border: none; }
.ig-post.dark .ig-q { color: white; }
.ig-post .ig-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ig-post .ig-foot .left { color: var(--red); }
.ig-post.dark .ig-foot .left { color: var(--red-bright); }
.ig-post .ig-foot .right { color: var(--gray-500); }
.ig-post.dark .ig-foot .right { color: rgba(255,255,255,0.5); }
/* Instagram avatar — uses the isotipo system */
.ig-post .ig-mark {
  position: absolute; top: 36px; right: 36px;
  width: 28px; height: 28px;
  font-size: 28px;            /* .lm-iso uses width/height = 1em */
}
.ig-post.dark .ig-mark { --iso-bg: #fff; --iso-letter: var(--navy); --iso-dot: var(--red-bright); }

/* Business card */
.bc {
  width: 86%;
  aspect-ratio: 1.7 / 1;
  background: var(--paper);
  border: 1px solid var(--border);
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 28px;
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.18);
}
.bc.dark { background: var(--navy); color: white; border: none; }
.bc .bc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.bc .bc-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.bc.dark .bc-name { color: white; }
.bc .bc-role {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gray-700);
  margin-top: 4px;
}
.bc.dark .bc-role { color: rgba(255,255,255,.6); }
.bc-mark {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1;
  display: inline-block;
  letter-spacing: -0.04em;
}
.bc-mark .dt {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--red);
  display: inline-block;
  margin-left: 2px;
  vertical-align: baseline;
}
.bc.dark .bc-mark { color: white; }
.bc .bc-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--gray-700);
}
.bc.dark .bc-foot { color: rgba(255,255,255,.6); }

/* Letterhead */
.letterhead {
  width: 78%;
  aspect-ratio: 0.707;  /* A4 */
  background: white;
  border: 1px solid var(--border);
  padding: 8% 9% 7%;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.18);
}
.letterhead .lh-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--navy);
}
.letterhead .lh-mark {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.04em;
  display: inline-block;
}
.letterhead .lh-mark .dt {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--red); display: inline-block; margin-left: 1.5px;
  vertical-align: baseline;
}
.letterhead .lh-meta {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
  text-align: right;
  line-height: 1.6;
}
.letterhead .lh-body {
  flex: 1;
  padding-top: 24px;
  font-family: var(--sans);
  font-size: 9px;
  line-height: 1.7;
  color: var(--gray-700);
}
.letterhead .lh-body h4 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.letterhead .lh-body p { margin: 0 0 8px; }
.letterhead .lh-foot {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  display: flex; justify-content: space-between;
}

/* Email signature */
.email-sig {
  width: 84%;
  background: white;
  border: 1px solid var(--border);
  padding: 28px;
  display: flex; gap: 20px;
  align-items: center;
}
/* Email signature avatar — delegates rendering to .lm-iso */
.email-sig .es-img {
  width: 64px; height: 64px;
  font-size: 64px;            /* .lm-iso uses 1em sizing */
  flex-shrink: 0;
}
.email-sig .es-text {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
}
.email-sig .es-text .es-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.email-sig .es-text .es-role {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--red);
  margin: 4px 0 8px;
}
.email-sig .es-text .es-meta { color: var(--gray-700); font-size: 11px; }
.email-sig .es-divider {
  width: 1px; align-self: stretch; background: var(--border);
}

/* Web mock */
.webmock {
  width: 100%; height: 100%;
  background: var(--paper);
  display: flex; flex-direction: column;
}
.webmock .wm-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: white;
  border-bottom: 1px solid var(--border);
}
.webmock .wm-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-200); }
.webmock .wm-bar .url {
  flex: 1;
  background: var(--gray-100);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gray-700);
  padding: 4px 12px;
  border-radius: 999px;
  margin-left: 8px;
  text-align: center;
}
.webmock .wm-content {
  flex: 1;
  padding: 28px 36px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.webmock .wm-nav {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
  color: var(--navy);
}
.webmock .wm-nav .links {
  display: flex; gap: 14px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-700);
}
/* Web/landing nav brand mark — proper round dot on baseline */
.webmock .wm-brand { display: inline-block; line-height: 1; }
.webmock .wm-brand .wm-dot {
  display: inline-block;
  width: 0.12em; height: 0.12em;
  border-radius: 50%;
  background: var(--red);
  margin-left: 0.04em;
  vertical-align: baseline;
}
.webmock .wm-hero {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 4.5vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--navy);
}
.webmock .wm-hero em { font-style: italic; color: var(--gray-500); font-weight: 400; }
/* Closing dot of landing hero copy — round disc on baseline */
.webmock .wm-hero .wm-hero-dot {
  display: inline-block;
  width: 0.085em; height: 0.085em;
  border-radius: 50%;
  background: var(--red);
  margin-left: 0.02em;
  vertical-align: baseline;
}
.webmock .wm-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* Slide */
.slide {
  background: var(--paper);
  width: 100%; height: 100%;
  padding: 8% 8% 6%;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
}
.slide.dark { background: var(--navy); color: white; }
.slide-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.slide.dark .slide-head { color: rgba(255,255,255,.5); }
.slide-head .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); display: inline-block; }
.slide-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
}
.slide.dark .slide-title { color: white; }
.slide-title em { font-style: italic; color: var(--gray-500); font-weight: 400; }
.slide.dark .slide-title em { color: rgba(255,255,255,.55); }
.slide-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.slide.dark .slide-foot { color: rgba(255,255,255,.5); }
.slide-foot .br { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: 12px; letter-spacing: -0.04em; display: inline-block; }
.slide.dark .slide-foot .br { color: white; }
.slide-foot .br .dt { width: 3px; height: 3px; background: var(--red); border-radius: 50%; display: inline-block; margin-left: 1.5px; vertical-align: baseline; }

/* ============== PHOTO ============== */
.photo-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}
.photo-tile {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background: var(--gray-100);
}
.photo-tile.wide { grid-row: span 1; aspect-ratio: 1; }
.photo-tile .ph-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: white;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
}
.photo-tile .ph-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--gray-500);
}

.photo-principles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-top: 40px;
}
.photo-principles .pp-card {
  border-top: 2px solid var(--navy);
  padding-top: 20px;
}
.photo-principles .pp-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 8px;
}
.photo-principles .pp-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray-700);
}

/* ============== FOOTER ============== */
footer {
  background: var(--navy);
  color: white;
  padding: 80px 0 40px;
}
footer .shell { color: white; }
.foot-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 32px;
}
.foot-mark {
  font-family: var(--serif);
  font-size: 88px;
  font-weight: 500;
  letter-spacing: -0.04em;
  display: inline-block;          /* simple baseline behaviour */
  line-height: 0.95;
}
.foot-mark em {
  display: block;
  font-weight: 400; font-style: italic; opacity: 0.5;
  font-size: 56px; margin-top: 18px; letter-spacing: -0.02em;
}
.foot-mark .dt {
  /* Punto del wordmark a escala del cuerpo del logo (≈12% del cap height) */
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--red-bright);
  display: inline-block;
  margin-left: 2px;
  vertical-align: baseline;       /* dot bottom on the Leitmotiv baseline */
}

.foot-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,.5);
  text-align: right;
  line-height: 1.8;
  text-transform: uppercase;
}
.foot-meta b { color: white; font-weight: 500; display: block; }

.foot-bottom {
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* ============================================================
   ISOTIPO · apartado ampliado (sección 01.E – 01.I)
   ============================================================ */
.iso-deep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 760px) {
  .iso-deep-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Construction diagram */
.iso-construction {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 64px 56px;
  display: flex; align-items: center; justify-content: center;
  min-height: 420px;
}
.iso-cn-stage {
  position: relative;
  width: 320px; height: 320px;
}
.iso-cn-iso {
  width: 100%; height: 100%;
  font-size: 320px;
  display: block;
}
.iso-cn-guide {
  position: absolute;
  pointer-events: none;
  border-color: var(--red);
  border-style: dashed;
  border-width: 0;
}
/* horizontal "D" line above */
.iso-cn-d {
  top: -28px; left: 0; right: 0; height: 1px;
  border-top-width: 1px;
}
/* vertical "0.556 D" line on the left */
.iso-cn-h {
  top: 22.2%; bottom: 22.2%; left: -28px; width: 1px;
  border-left-width: 1px;
}
/* horizontal line marking dot center distance from circle center */
.iso-cn-dotpos-h {
  top: 50%; left: 50%; right: calc(100% - (50% + 25.8%)); height: 1px;
  border-top-width: 1px;
  opacity: 0.7;
}
/* vertical line marking dot center distance from circle center */
.iso-cn-dotpos-v {
  top: 50%; bottom: calc(100% - (50% + 22.2%));
  left: calc(50% + 25.8%);
  width: 1px;
  border-left-width: 1px;
  opacity: 0.7;
}
.iso-cn-tick { position: absolute; background: var(--red); }
.iso-cn-tick-d-l { top: -32px; left: 0; width: 1px; height: 8px; }
.iso-cn-tick-d-r { top: -32px; right: 0; width: 1px; height: 8px; }
.iso-cn-tick-h-t { left: -32px; top: 22.2%; height: 1px; width: 8px; }
.iso-cn-tick-h-b { left: -32px; bottom: 22.2%; height: 1px; width: 8px; }
.iso-cn-meas {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--red);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.iso-cn-meas-d { top: -42px; left: 50%; transform: translateX(-50%); }
.iso-cn-meas-h { left: -54px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }
.iso-cn-meas-dpos-h { top: calc(50% + 6px); left: calc(50% + 12.9%); transform: translateX(-50%); }
.iso-cn-meas-dpos-v { top: calc(50% + 11.1%); left: calc(50% + 25.8% + 8px); transform: translateY(-50%); }

/* Specs panel */
.iso-specs {
  padding: 12px 0;
}
.iso-specs-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}
.iso-specs-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
}
.iso-spec {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.iso-spec .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  flex-shrink: 0;
}
.iso-spec .v {
  font-family: var(--sans);
  color: var(--navy);
  font-weight: 500;
  text-align: right;
}
.iso-spec .hex {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray-500);
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Variants grid */
.iso-variants {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 760px) {
  .iso-variants { grid-template-columns: repeat(2, 1fr); }
}
.iso-variant {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  padding: 16%;
  container-type: inline-size;
}
.iso-vfill { font-size: 64cqi; }
@supports not (font-size: 1cqi) {
  .iso-vfill { font-size: clamp(80px, 14vw, 140px); }
}
.iso-vlabel {
  position: absolute;
  bottom: 12px; left: 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.iso-vlabel.on-dark { color: rgba(255,255,255,.55); }

/* Clearspace */
.iso-clearspace {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 56px;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.iso-clearspace::before {
  content: "";
  position: absolute;
  inset: 56px;
  border: 1px dashed rgba(201, 36, 56, 0.45);
}
.iso-cs-iso {
  font-size: clamp(140px, 32cqi, 240px);
  z-index: 1;
}
.iso-cs-meas {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--red);
  z-index: 2;
}
.iso-cs-meas-t { top: 22px; left: 50%; transform: translateX(-50%); }
.iso-cs-meas-b { bottom: 22px; left: 50%; transform: translateX(-50%); }
.iso-cs-meas-l { left: 22px; top: 50%; transform: translateY(-50%); }
.iso-cs-meas-r { right: 22px; top: 50%; transform: translateY(-50%); }

/* Min sizes row */
.iso-min-row {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px 32px;
}
.iso-min-cell {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.iso-min-frame {
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 120px;
}
.iso-min-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
  text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.iso-min-cap b {
  color: var(--navy);
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Don'ts */
.iso-donts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .iso-donts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .iso-donts { grid-template-columns: repeat(2, 1fr); } }
.iso-dont {
  display: flex; flex-direction: column; gap: 10px;
}
.iso-dont-stage {
  aspect-ratio: 1;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 12px;
}
.iso-dont-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
  display: flex; align-items: center; gap: 8px;
}
.iso-dont-cap .x { color: var(--red); font-size: 12px; }

/* ============================================================
   DOWNLOADS SECTION (08)
   ============================================================ */
.dl-master {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 64px;
}
@media (max-width: 900px) { .dl-master { grid-template-columns: 1fr; } }
.dl-master-card {
  border: 1px solid var(--border);
  background: var(--white);
  padding: 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 220px;
}
.dl-master-card.dark { background: var(--navy); border-color: var(--navy); color: white; }
.dl-master-card .lab {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--red); margin-bottom: 14px;
}
.dl-master-card.dark .lab { color: var(--red-bright); }
.dl-master-card h4 {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.05; margin: 0 0 10px;
  color: var(--navy);
}
.dl-master-card.dark h4 { color: white; }
.dl-master-card h4 em { font-style: italic; color: var(--gray-500); font-weight: 400; }
.dl-master-card.dark h4 em { color: rgba(255,255,255,.55); }
.dl-master-card p {
  font-size: 13px; line-height: 1.6; color: var(--gray-700);
  margin: 0 0 20px;
}
.dl-master-card.dark p { color: rgba(255,255,255,.7); }
.dl-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--navy);
  color: var(--navy);
  border-radius: 999px;
  background: white;
  transition: all .15s ease;
  cursor: pointer;
}
.dl-btn:hover { background: var(--navy); color: white; }
.dl-master-card.dark .dl-btn { border-color: white; color: white; background: transparent; }
.dl-master-card.dark .dl-btn:hover { background: white; color: var(--navy); }
.dl-btn.primary { background: var(--red); border-color: var(--red); color: white; }
.dl-btn.primary:hover { background: var(--navy); border-color: var(--navy); color: white; }

.dl-group { margin-bottom: 56px; }
.dl-group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 14px; margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.dl-group-head h3 {
  font-family: var(--serif); font-size: 28px; font-weight: 600;
  letter-spacing: -0.015em; color: var(--navy); margin: 0;
}
.dl-group-head h3 em { font-style: italic; color: var(--gray-500); font-weight: 400; }
.dl-group-head .ref {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gray-500);
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .dl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dl-grid { grid-template-columns: 1fr; } }

.dl-card {
  border: 1px solid var(--border);
  background: white;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dl-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -16px rgba(17,17,34,.18); border-color: var(--navy); }
.dl-preview {
  aspect-ratio: 4/3;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--border);
  padding: 18px;
}
.dl-preview img { max-width: 80%; max-height: 80%; object-fit: contain; }
.dl-preview.dark { background: var(--navy); }
.dl-preview.checker {
  background-image:
    linear-gradient(45deg, var(--gray-100) 25%, transparent 25%),
    linear-gradient(-45deg, var(--gray-100) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--gray-100) 75%),
    linear-gradient(-45deg, transparent 75%, var(--gray-100) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: white;
}
.dl-preview.checker.on-dark {
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.08) 75%);
  background-color: var(--navy);
}
.dl-meta {
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid var(--border);
}
.dl-meta .name {
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  color: var(--navy); letter-spacing: -0.01em; line-height: 1.2;
}
.dl-meta .role {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-500); margin-top: 2px;
}
.dl-actions {
  padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--gray-50);
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.1em; color: var(--gray-700);
}
.dl-actions .size { text-transform: uppercase; }
.dl-actions a {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red); text-decoration: none;
  border-bottom: 1px solid var(--red);
  padding-bottom: 1px;
}
.dl-actions a:hover { color: var(--navy); border-color: var(--navy); }

.dl-howto {
  background: var(--navy); color: white;
  padding: 28px 32px;
  margin-bottom: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 760px) { .dl-howto { grid-template-columns: 1fr; } }
.dl-howto .num {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
  margin-bottom: 10px;
}
.dl-howto .num span { color: var(--red-bright); }
.dl-howto h5 {
  font-family: var(--serif); font-size: 18px; font-weight: 500;
  letter-spacing: -0.01em; margin: 0 0 6px;
}
.dl-howto p { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.7); margin: 0; }
.dl-howto kbd {
  display: inline-block;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  padding: 1px 6px; border-radius: 3px;
  font-family: var(--mono); font-size: 11px;
}

/* Print */
@media print {
  .topnav { display: none; }
  section { page-break-inside: avoid; }
  .dl-card { break-inside: avoid; }
}


/* ============================================================
   07.B · LENGUAJE VISUAL · FILTROS PARA FOTOGRAFÍA
   Sistema de seis tratamientos coherentes. Documento detallado
   en Lenguaje Visual.html — aquí solo las utilidades visuales.
   ============================================================ */

:root{
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Marco base · cualquier muestra */
.lv-frame{
  position: relative;
  overflow: hidden;
  background: var(--gray-100);
  aspect-ratio: 1 / 1;
  isolation: isolate;
  container-type: inline-size;
}
.lv-frame > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: var(--lv-filter, none);
}
.lv-frame::before{
  content: ""; position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
  mix-blend-mode: var(--lv-blend, soft-light);
  background: var(--lv-wash, transparent);
  opacity: var(--lv-wash-opacity, 1);
}
.lv-frame::after{
  content: ""; position: absolute; inset: 0;
  z-index: 3; pointer-events: none;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: var(--lv-grain, .12);
  mix-blend-mode: overlay;
}

/* ===== Tratamientos ===== */
.lv-silencio{
  --lv-filter: saturate(.55) contrast(1.04) brightness(1.02);
  --lv-wash: linear-gradient(180deg, rgba(250,249,246,.10), rgba(20,20,28,.18));
  --lv-blend: soft-light;
  --lv-grain: .14;
}
.lv-penumbra{
  --lv-filter: contrast(1.18) saturate(.80) brightness(.94);
  --lv-wash: linear-gradient(180deg, rgba(255,220,180,.18), rgba(17,17,34,.55));
  --lv-blend: multiply;
  --lv-grain: .18;
}
.lv-papel{
  --lv-filter: sepia(.18) saturate(.7) contrast(.96) brightness(1.04);
  --lv-wash: linear-gradient(180deg, rgba(232,226,212,.28), rgba(120,90,60,.18));
  --lv-blend: multiply;
  --lv-grain: .22;
}
.lv-cita{
  --lv-filter: saturate(.18) contrast(1.12) brightness(.72);
  --lv-wash: linear-gradient(180deg, rgba(17,17,34,.45), rgba(17,17,34,.82));
  --lv-blend: multiply;
  --lv-grain: .16;
}
.lv-duotono{
  --lv-filter: grayscale(1) contrast(1.12) brightness(.95);
  --lv-grain: .16;
}
.lv-duotono::before{
  background: linear-gradient(180deg, rgba(250,249,246,.55), rgba(250,249,246,.55));
  mix-blend-mode: lighten;
}
.lv-duotono::after{
  background-image:
    linear-gradient(180deg, rgba(17,17,34,.55), rgba(17,17,34,.55)),
    var(--grain);
  background-size: cover, 220px 220px;
  mix-blend-mode: multiply;
  opacity: 1;
}
.lv-estudio{
  --lv-filter: saturate(.78) contrast(1.06) brightness(1.0);
  --lv-wash: linear-gradient(180deg, rgba(255,255,255,0), rgba(17,17,34,.10));
  --lv-blend: multiply;
  --lv-grain: .10;
}

/* ===== Tira inferior · UNA LÍNEA con metadata de proyecto ===== */
.lv-caption{
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 5;
  padding: 14px 18px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.95);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.62));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lv-caption .b{
  display: inline-block;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--red-bright);
  margin: 0 8px 2px;
  vertical-align: middle;
}

/* ===== Letterbox + HUD (Penumbra) ===== */
.lv-letterbox-bars{
  position: absolute; left: 0; right: 0;
  z-index: 6; pointer-events: none;
  background: #000;
}
.lv-letterbox-bars.top{ top: 0; height: 14.5%; }
.lv-letterbox-bars.bot{ bottom: 0; height: 14.5%; }
.lv-hud-strip{
  position: absolute; z-index: 7;
  left: 16px; right: 60px;
  height: 14.5%;
  display: flex; align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,.85);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.lv-hud-strip.top{ top: 0; }
.lv-hud-strip.bot{ bottom: 0; right: 16px; }
.lv-hud-strip .b{
  display: inline-block;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--red-bright);
  margin: 0 8px 1px;
  vertical-align: middle;
}
.lv-hud-strip .rec-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red-bright);
  display: inline-block;
  margin: 0 8px 1px 0;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(240,70,85,.7);
  animation: lv-pulse 1.8s ease-in-out infinite;
}
@keyframes lv-pulse { 50% { opacity: .45; } }

/* ===== Marco papel + cita interior (Papel) ===== */
.lv-paper-mat{
  position: absolute; inset: 14px;
  z-index: 4; pointer-events: none;
  border: 1px solid rgba(250,249,246,.35);
}
.lv-paper-caption{
  position: absolute; left: 28px; right: 28px; bottom: 24px;
  z-index: 5;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: rgba(250,249,246,.96);
  font-size: clamp(13px, 1.6vw, 18px);
  line-height: 1.3;
  text-wrap: balance;
}
.lv-paper-caption .src{
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,249,246,.6);
  margin-top: 8px;
}

/* ===== Pull-quote (Cita) ===== */
.lv-quote{
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: 11% 10%;
  color: #fff;
}
.lv-quote .q{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 2.2vw, 24px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
  margin: 0;
}
.lv-quote .q em{ color: var(--red-bright); font-style: italic; }
.lv-quote .src{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
}
.lv-quote .src::before{
  content: ""; width: 22px; height: 1px; background: var(--red-bright);
}

/* ===== Mosca isotipo top-right (común) ===== */
.lv-iso{
  position: absolute;
  top: 5.5%; right: 5.5%;
  z-index: 8;
  width: 9cqi; height: 9cqi;
  font-size: 9cqi;
  min-width: 18px; min-height: 18px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
@supports not (font-size: 1cqi) {
  .lv-iso{ width: 28px; height: 28px; font-size: 28px; }
}
.lv-frame.lv-penumbra .lv-iso{
  top: 2.5%;
  width: 7cqi; height: 7cqi; font-size: 7cqi;
  filter: none;
}
.lv-iso.lv-iso-duo{
  width: 6cqi; height: 6cqi; font-size: 6cqi;
  opacity: .85;
}

/* ===== Crop marks (Estudio) ===== */
.lv-corners > span{
  position: absolute; z-index: 6;
  width: 18px; height: 18px;
  border-color: rgba(255,255,255,.75);
  border-style: solid;
  border-width: 0;
}
.lv-corners .tl{ top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.lv-corners .tr{ top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.lv-corners .bl{ bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.lv-corners .br{ bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }

/* ===== Marca central (Duotono) ===== */
.lv-duo-mark{
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--paper);
  text-align: center;
  pointer-events: none;
}
.lv-duo-mark .duo-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.03em;
  color: var(--paper);
  line-height: 1;
  display: inline-flex; align-items: baseline;
}
.lv-duo-mark .duo-title .dt{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red-bright);
  display: inline-block;
  margin-left: 2px; align-self: baseline;
}
.lv-duo-mark .duo-sub{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250,249,246,.6);
  margin-top: 14px;
}

/* ===== Layout: tarjeta de tratamiento dentro del brandbook ===== */
.lv-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 760px){ .lv-grid{ grid-template-columns: 1fr 1fr; } }
.lv-card-cap{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px;
}
.lv-card-cap .name{
  font-family: var(--serif); font-weight: 600; font-size: 16px;
  color: var(--navy); letter-spacing: -0.01em;
}
.lv-card-cap .meta{
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-500);
}

/* Tres constantes */
.lv-constants{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
@media (max-width: 760px){ .lv-constants{ grid-template-columns: 1fr; } }
.lv-constants .lc-name{
  font-family: var(--serif); font-weight: 500; font-size: 17px;
  color: var(--navy); letter-spacing: -0.01em; line-height: 1.3;
}

/* Cabecera de subsección con enlace al doc completo */
.lv-subhead{
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap; gap: 12px;
}
.lv-subhead .lv-doclink{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid var(--red);
  padding-bottom: 2px;
}
.lv-subhead .lv-doclink:hover{ color: var(--navy); border-color: var(--navy); }

.lv-intro{
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px; margin-bottom: 32px;
  align-items: end;
}
@media (max-width: 760px){ .lv-intro{ grid-template-columns: 1fr; gap: 16px; } }
.lv-intro h3{
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(32px, 4vw, 48px); line-height: 1.0;
  letter-spacing: -0.02em; color: var(--navy); margin: 0;
}
.lv-intro h3 em{ font-style: italic; color: var(--gray-500); font-weight: 400; }
.lv-intro p{
  font-family: var(--serif-soft); font-style: italic; font-weight: 300;
  font-size: 18px; line-height: 1.55; color: var(--gray-700);
  margin: 0; max-width: 560px;
}