/* ============================================================
   MING — Brandbook
   A4 landscape · 1400 × 990 px (1.414:1)
   ============================================================ */

@font-face {
  font-family: 'Georgia';
  src: url('fonts/Georgia.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Georgia';
  src: url('fonts/Georgia_Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: 'Georgia';
  src: url('fonts/Georgia_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  --verde:        #1E3B34;
  --verde-700:    #1E3B34;
  --verde-800:    #142B26;
  --verde-900:    #0E1F1B;
  --verde-600:    #2C544A;
  --verde-300:    #8FAFA4;
  --verde-200:    #C0D2CB;
  --verde-100:    #E0EAE6;

  --arena:        #D6BE8A;
  --arena-100:    #F5EDDD;
  --arena-200:    #ECDDBF;
  --arena-300:    #E1CDA4;
  --arena-500:    #BFA572;

  --arcilla:      #E9E1CE;
  --arcilla-50:   #F9F5EC;
  --arcilla-100:  #F4EDDE;
  --arcilla-300:  #DDD1B6;

  --tierra:       #C49A6C;
  --tierra-300:   #DDB78E;
  --madera:       #8C6F4E;
  --madera-600:   #6E5740;
  --madera-700:   #574431;

  --acento:       #A61D21;
  --acento-700:   #821518;

  --cream:        #FAF5EC;
  --white:        #FFFFFF;
  --black:        #0D0A06;

  --font-display: 'Georgia', 'Times New Roman', serif;
  --font-body:    'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ============================================================
   Deck shell
   ============================================================ */

html, body {
  margin: 0;
  padding: 0;
  background: #0D0A06;
  font-family: var(--font-body);
  color: var(--verde);
}

deck-stage {
  --stage-bg: #0D0A06;
}

deck-stage section {
  width: 1400px;
  height: 990px;
  overflow: hidden;
  background: var(--arcilla);
  color: var(--verde);
  font-family: var(--font-body);
  position: relative;
  box-sizing: border-box;
}

/* ============================================================
   Page chrome — header & footer
   ============================================================ */

.page {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.page-header {
  position: absolute;
  top: 48px;
  left: 64px;
  right: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--madera);
  z-index: 5;
}

.page-header .ph-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.page-header .ph-mark {
  width: 30px;
  height: 42px;
  flex-shrink: 0;
}

.page-footer {
  position: absolute;
  bottom: 40px;
  left: 64px;
  right: 64px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--madera);
  z-index: 5;
}

.page-footer .pf-section {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--verde);
}

.page-num {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--verde);
}

/* Dark page variant */
.page.dark {
  background: var(--verde);
  color: var(--cream);
}
.page.dark .page-header,
.page.dark .page-footer {
  color: var(--arena-300);
}
.page.dark .page-header .ph-mark {
  background-image: url(assets/heron-isotipo-claro.png);
}
.page.dark .page-footer .pf-section,
.page.dark .page-num { color: var(--cream); }

.page.cream { background: var(--cream); }
.page.arcilla-50 { background: var(--arcilla-50); }

/* ============================================================
   Logo / mark masks (recolor via CSS)
   ============================================================ */

/* Marks render the heron PNG art via background-image. Color is baked
   into three asset variants (oscuro = verde, claro = blanco, beige = tierra);
   each element picks one through an inline background-image. */
.mark {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.mark.logo-h     { aspect-ratio: 3379 / 1501; background-image: url(assets/heron-logo-oscuro.png); }
.mark.isotipo    { aspect-ratio: 1039 / 1501; background-image: url(assets/heron-isotipo-oscuro.png); }
.mark.tipografia { aspect-ratio: 2453 / 1501; background-image: url(assets/heron-tipografia-oscuro.png); }
.mark.simbolo    { aspect-ratio: 1039 / 1501; background-image: url(assets/heron-isotipo-oscuro.png); }

/* Vertical lockup: heron isotipo stacked above the MING wordmark.
   Size by setting an explicit height on the element; add a variant
   class (claro / beige / negro) to recolor. */
/* (The logo has no vertical lockup — only the horizontal logotipo,
   the isotipo, and the tipografía wordmark.) */

/* Bicolor lockup: heron isotipo (tierra) + MING wordmark (verde) */
.lockup-bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
}
.lockup-bi > .lb-iso,
.lockup-bi > .lb-type {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.lockup-bi > .lb-iso  { height: 100%; aspect-ratio: 1039 / 1501; background-image: url(assets/heron-isotipo-beige.png); }
.lockup-bi > .lb-type { height: 50%;  aspect-ratio: 2453 / 1501; background-image: url(assets/heron-tipografia-oscuro.png); }

/* 命 carácter — supporting cultural mark */
.ming-glyph {
  font-family: var(--font-display);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tierra);
}

/* For header tiny marks */
.ph-mark {
  width: 30px;
  height: 42px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(assets/heron-isotipo-oscuro.png);
}

/* ============================================================
   Type primitives
   ============================================================ */

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--madera);
}

.section-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--tierra);
  letter-spacing: 0;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--verde);
}

.display.xxl  { font-size: 132px; line-height: 0.96; }
.display.xl   { font-size: 96px; }
.display.lg   { font-size: 72px; }
.display.md   { font-size: 54px; }
.display.sm   { font-size: 40px; }

.serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--verde);
}

.body-lg {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--verde-600);
}
.body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--verde-600);
}
.body-sm {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: var(--verde-600);
}
.body-mono {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--verde-600);
}

.rule {
  height: 1px;
  background: var(--madera);
  opacity: 0.6;
  border: none;
  display: block;
}
.rule.short { width: 56px; height: 2px; background: var(--tierra); opacity: 1; }
.rule.tierra { background: var(--tierra); opacity: 1; }

/* ============================================================
   Generic helpers
   ============================================================ */

.col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.col-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; }
.col-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stack { display: flex; flex-direction: column; gap: var(--gap, 24px); }
.row   { display: flex; align-items: center; gap: var(--gap, 24px); }

.tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--madera);
  padding: 6px 12px;
  border: 1px solid var(--madera);
  border-radius: 999px;
}

/* Arch motif (decorative) */
.arch {
  background: var(--arena-100);
  border-top-left-radius: 50% 80%;
  border-top-right-radius: 50% 80%;
}

/* Subtle dot grid for technical pages */
.dot-grid {
  background-image: radial-gradient(circle, rgba(30, 59, 52, 0.16) 1px, transparent 1.4px);
  background-size: 24px 24px;
  background-position: 0 0;
}

/* image */
.img-frame {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============================================================
   COVER (page 01)
   ============================================================ */

.cover {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}
.cover .cover-left {
  background: var(--arcilla);
  padding: 64px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cover .cover-right {
  position: relative;
  overflow: hidden;
  background: var(--verde-900);
}
.cover .cover-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92);
}
.cover-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cover-title {
  font-family: var(--font-display);
  font-size: 156px;
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--verde);
  margin: 0;
}
.cover-title .it { font-style: italic; color: var(--tierra); }

.cover-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--verde-600);
  line-height: 1.3;
  max-width: 440px;
}

.cover-right .right-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 64px;
  color: var(--cream);
  z-index: 2;
}
.cover-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,31,27,0.18) 0%, rgba(14,31,27,0) 30%, rgba(14,31,27,0) 70%, rgba(14,31,27,0.5) 100%);
  z-index: 1;
}

/* ============================================================
   TOC
   ============================================================ */

.toc-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 80px;
  font-family: var(--font-display);
}
.toc-row {
  display: grid;
  grid-template-columns: 38px 1fr 48px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(30, 59, 52, 0.15);
  font-size: 22px;
  color: var(--verde);
}
.toc-row .toc-num {
  font-style: italic;
  color: var(--tierra);
  font-size: 16px;
}
.toc-row .toc-title {
  font-family: var(--font-display);
}
.toc-row .toc-page {
  text-align: right;
  font-style: italic;
  font-size: 16px;
  color: var(--verde-600);
}

/* ============================================================
   Color page
   ============================================================ */

.swatch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.swatch {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.swatch .chip {
  height: 170px;
  border-radius: 0;
  border: 1px solid rgba(30, 59, 52, 0.08);
}
.swatch .name {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--verde);
  line-height: 1;
}
.swatch .codes {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.55;
  color: var(--verde-600);
  letter-spacing: 0.02em;
}
.swatch .codes b { color: var(--verde); font-weight: 500; }

.proportion-bar {
  display: flex;
  height: 96px;
  overflow: hidden;
}
.proportion-bar > div {
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ============================================================
   Logo construction / clear space
   ============================================================ */

.construction {
  position: relative;
  background: var(--arcilla-50);
  padding: 56px;
}
.construction .logo-wrap {
  position: relative;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-marker {
  position: absolute;
  border: 1px dashed var(--tierra);
  background: transparent;
}
.cs-x {
  width: 32px;
  height: 32px;
  background: var(--tierra);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
}

/* ============================================================
   Don'ts grid
   ============================================================ */

.dont-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; gap: 24px 24px; min-height: 0; }
.dont-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dont-card .frame {
  flex: 1;
  min-height: 0;
  background: var(--white);
  border: 1px solid rgba(30, 59, 52, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.dont-card .x-mark {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--acento);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.dont-card .label {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--verde-600);
  line-height: 1.4;
}

.do-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 28px; min-height: 0; }
.do-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.do-card .frame {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.do-card .check {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
}
.do-card .label {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--verde-600);
}

/* ============================================================
   Photo treatments
   ============================================================ */

.photo-grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; height: 100%; }
.photo-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.photo-frame { overflow: hidden; background: var(--arena-100); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* arch frame */
.arch-frame {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 50% 75%;
  border-top-right-radius: 50% 75%;
}

/* ============================================================
   Application mockups
   ============================================================ */

.mock-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 40px;
  min-height: 0;
  min-width: 0;
}

/* business card mock */
.biz-card {
  width: 70%;
  aspect-ratio: 1.7 / 1;
  background: var(--cream);
  box-shadow: 0 18px 40px rgba(30, 59, 52, 0.18);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transform: rotate(-4deg);
}
.biz-card.dark { background: var(--verde); color: var(--cream); }

/* social mock */
.social-post {
  width: 78%;
  aspect-ratio: 1 / 1;
  background: var(--arena-100);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 14px 30px rgba(30, 59, 52, 0.12);
}

/* badge / sello */
.sello {
  width: 60%;
  aspect-ratio: 1;
  border: 1px solid var(--verde);
  border-radius: 999px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sello::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed var(--tierra);
  border-radius: 999px;
}

/* Decorative arch element */
.arch-deco {
  position: absolute;
  background: var(--arena-200);
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  pointer-events: none;
}

/* number plate (large chapter numbers) */
.plate-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 220px;
  line-height: 1;
  color: var(--tierra);
  opacity: 0.95;
}

/* Specimen */
.specimen-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: baseline;
  gap: 32px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(30, 59, 52, 0.12);
}
.specimen-row .label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--madera);
}
.specimen-row .sample {
  font-family: var(--font-display);
  color: var(--verde);
}
.specimen-row .sample.sans { font-family: var(--font-body); }

/* ============================================================
   Print
   ============================================================ */
@media print {
  @page { size: 1400px 990px; margin: 0; }
  html, body { background: white; }
}


/* ============================================================
   TWEAK OVERRIDES — Mood / Typography / Accent
   ============================================================ */

/* Profunda — dark, atmospheric, premium */
body[data-mood="profunda"] {
  --arcilla:     #142B26;
  --arcilla-50:  #1E3B34;
  --arcilla-100: #142B26;
  --arcilla-200: #1E3B34;
  --arcilla-300: #2C544A;
  --cream:       #1E3B34;
  --verde:       #FAF5EC;
  --verde-600:   #E1CDA4;
  --verde-700:   #FAF5EC;
  --verde-800:   #FAF5EC;
  --madera:      #BFA572;
  --madera-600:  #E1CDA4;
  --black:       #FAF5EC;
}
body[data-mood="profunda"] deck-stage section { background: #142B26; }
body[data-mood="profunda"] .page.dark { background: #0E1F1B; }
body[data-mood="profunda"] .page.cream { background: #1E3B34; }
body[data-mood="profunda"] .page.arcilla-50 { background: #182F29; }
body[data-mood="profunda"] .cover-left { background: #142B26; }
/* Subtle borders/rules need to be lighter on dark */
body[data-mood="profunda"] .toc-row { border-bottom-color: rgba(250,245,236,0.14); }

/* Mineral — high-key cream + white, gallery feel */
body[data-mood="mineral"] {
  --arcilla:     #FAF5EC;
  --arcilla-50:  #FFFFFF;
  --arcilla-100: #FAF5EC;
  --arcilla-200: #F4EDDE;
  --arcilla-300: #ECDDBF;
  --cream:       #FFFFFF;
}
body[data-mood="mineral"] deck-stage section { background: #FAF5EC; }
body[data-mood="mineral"] .page.cream { background: #FFFFFF; }
body[data-mood="mineral"] .page.arcilla-50 { background: #FFFFFF; }
body[data-mood="mineral"] .cover-left { background: #FAF5EC; }

/* ---- Display typography variants ---- */
body[data-display="editorial"] {
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}
body[data-display="editorial"] .display,
body[data-display="editorial"] h1,
body[data-display="editorial"] h2,
body[data-display="editorial"] h3,
body[data-display="editorial"] .cover-title {
  font-weight: 500;
  letter-spacing: -0.005em;
}
body[data-display="editorial"] .cover-title { font-size: 168px; }

body[data-display="contemporanea"] {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}
body[data-display="contemporanea"] .display,
body[data-display="contemporanea"] h1,
body[data-display="contemporanea"] h2,
body[data-display="contemporanea"] h3,
body[data-display="contemporanea"] .cover-title {
  font-weight: 500;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  letter-spacing: -0.025em;
}

/* ---- Accent / highlight color variants ---- */
body[data-accent="acento"] {
  --tierra:     #A61D21;
  --tierra-300: #C42B30;
  --tierra-400: #A61D21;
  --tierra-500: #821518;
}
body[data-accent="verde"] {
  --tierra:     #3F6D60;
  --tierra-300: #5F8A7D;
  --tierra-400: #3F6D60;
  --tierra-500: #2C544A;
}

/* When tweaks panel is open, push deck-stage's rail to the left so it doesn't fight */
body[data-tweaks-open] { /* hook for any future adjustment */ }