/* ONLYDROP / SISTEMA TIPOGRÁFICO COMPARTIDO — v42
   Cinco dialectos gráficos que comparten escala, posición y ornamentación.
   Ajustes principales: tokens --od-*, --title-size y --title-ink. */
:root {
  --od-hero: 'Bricolage Grotesque', Arial, sans-serif;
  --od-body: 'Manrope', Arial, sans-serif;
  --od-mono: 'IBM Plex Mono', monospace;
  --od-gothic: 'Grenze Gotisch', Georgia, serif;
  --od-pixel: 'Silkscreen', monospace;
  --od-hand: 'Caveat', cursive;
  --od-marker: 'Permanent Marker', cursive;
  --od-editorial: 'Instrument Serif', Georgia, serif;
  --title-ink: #f4f0e8;
  --title-accent: #86c6d2;
}
/* Identidad principal unificada: expresiva sin extrusión, sombra ni capas desplazadas. */
html body #home .index-intro h1,
html body #home .index-intro h1 span {
  font-family: var(--od-hero) !important;
  font-weight:800 !important;
  letter-spacing:-.075em !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 !important;
  filter:none !important;
}
html body #home .index-intro h1 span {
  font-family:var(--od-gothic) !important;
  font-weight:600 !important;
  letter-spacing:-.055em !important;
  font-size:.98em !important;
  color:var(--od-hot) !important;
}
html body .wordmark, html body #work .project-meta h3,
html body .project-dialog h2,
html body #about .about-section h2,html body #contact .contact-section h2 {
  font-family:var(--od-hero) !important;
  letter-spacing:-.055em !important;
}
html body #about .about-section h2 em,html body #contact .contact-section h2 em {
  font-family:var(--od-editorial) !important;
  font-weight:400 !important;
}
html body .index-description p,html body .about-copy,html body .section-aside,
html body .nav a,html body .contact-email,html body .social-links a {
  font-family:var(--od-body) !important;
}
html body .eyebrow,html body .index-kicker,html body .index-topline,
html body .visual-label,html body .visual-number,html body .menu-heading,
html body .index-meta,html body .index-footer,html body .category-info p,
html body .work-topline,html body .filter,html body .hud-coordinate {
  font-family:var(--od-mono) !important;
}
/* Una altura común reserva espacio REAL fuera del clip para los titulares.
   Esta estructura evita la falla de versiones anteriores. */
html body #home .category-menu > .category-card {
  padding-top:clamp(68px,7vh,84px) !important;
  --title-size:clamp(19px,1.65vw,29px);
  --title-ink:var(--od-ink);
}
html body #home .category-menu > .category-card .category-title {
  display:block !important;
  position:absolute !important;
  top:11px !important;
  left:12px !important;
  right:12px !important;
  bottom:auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  color:var(--title-ink) !important;
  z-index:20 !important;
  font-size:var(--title-size) !important;
  line-height:1.09 !important;
  letter-spacing:-.045em !important;
  font-weight:700 !important;
  text-wrap:balance;
  text-shadow:none !important;
  -webkit-text-stroke:0 !important;
  filter:none !important;
  transform:none !important;
  white-space:normal !important;
  overflow:visible !important;
}
/* Un motivo compartido: raya + punto, reutilizado en los cinco dialectos. */
html body #home .category-menu > .category-card .category-title::before {
  content:'';
  display:block;
  width:clamp(23px,3.1vw,48px);
  height:3px;
  margin:0 0 7px 0;
  background:var(--title-accent);
  clip-path:polygon(0 0,100% 0,95% 100%,0 100%);
}
html body #home .category-menu > .category-card .category-title::after {
  content:'✳';
  display:inline-block;
  font:normal 12px/1 var(--od-mono);
  color:var(--title-accent);
  vertical-align:top;
  margin:0 0 0 6px;
  letter-spacing:0;
  transform:none;
  background:none;
  width:auto;height:auto;
}
/* Cada variación está dentro de la MISMA jerarquía y el mismo lenguaje material. */
html body #home .category-menu > .cat-anim2d {
  --title-accent:#e9aa86;--title-size:clamp(19px,1.65vw,28px);
}
html body #home .cat-anim2d .category-title {
  font-family:var(--od-marker) !important;
  font-weight:400 !important;
  letter-spacing:-.055em !important;
}
html body #home .category-menu > .cat-anim3d {
  --title-accent:#91c5d0;--title-size:clamp(13px,1.17vw,19px);
}
html body #home .cat-anim3d .category-title {
  font-family:var(--od-pixel) !important;
  font-weight:400 !important;
  letter-spacing:-.095em !important;
  line-height:1.5 !important;
}
html body #home .category-menu > .cat-art2d {
  --title-accent:#d2b9a1;--title-size:clamp(30px,2.55vw,43px);
}
html body #home .cat-art2d .category-title {
  font-family:var(--od-gothic) !important;
  font-weight:600 !important;
  letter-spacing:-.055em !important;
  line-height:.86 !important;
}
html body #home .category-menu > .cat-story {
  --title-accent:#a9c4c5;--title-size:clamp(28px,2.3vw,39px);
}
html body #home .cat-story .category-title {
  font-family:var(--od-hand) !important;
  font-weight:700 !important;
  letter-spacing:-.045em !important;
  line-height:1.03 !important;
}
html body #home .cat-story .story-amp {
  font-family:var(--od-editorial) !important;
  color:var(--od-hot);
  font-size:.85em;
  font-style:italic;
}
html body #home .category-menu > .cat-projects {
  --title-accent:#e8b999;--title-size:clamp(19px,1.55vw,27px);
}
html body #home .cat-projects .category-title {
  display:block !important;
  font-family:var(--od-hero) !important;
  font-weight:800 !important;
  letter-spacing:-.05em !important;
  padding:0 !important;
}
html body #home .cat-projects .collage-piece {
  position:relative;
  display:inline-block;
  padding:0 2px;
  line-height:1.13;
  white-space:nowrap;
  background:transparent;
  color:var(--od-ink);
  font-family:var(--od-hero) !important;
  font-weight:800 !important;
  font-size:inherit !important;
}
html body #home .cat-projects .piece-one {transform:rotate(-3deg);}
html body #home .cat-projects .piece-two {transform:rotate(2deg) translateY(-2px);font-family:var(--od-gothic) !important;font-weight:600 !important;font-size:1.13em !important;color:var(--od-hot);}
html body #home .cat-projects .piece-three {transform:rotate(-2deg);font-family:var(--od-hero) !important;color:var(--od-cool);}
/* Interior: continuidad conceptual sin sacrificar lectura. */
html body #work[data-cat="animation2d"] #workHeading {font-family:var(--od-marker) !important;font-weight:400 !important;}
html body #work[data-cat="animation3d"] #workHeading {font-family:var(--od-pixel) !important;font-weight:400 !important;font-size:clamp(23px,3vw,48px) !important;line-height:1.45 !important;}
html body #work[data-cat="art2d"] #workHeading {font-family:var(--od-gothic) !important;font-weight:600 !important;}
html body #work[data-cat="storyboard"] #workHeading {font-family:var(--od-hand) !important;font-weight:700 !important;}
html body #work[data-cat="projects"] #workHeading {font-family:var(--od-hero) !important;font-weight:800 !important;}
@media(max-width:900px) {
 html body #home .category-menu > .category-card {padding-top:78px !important;}
}
@media(max-width:600px) {
 html body #home .category-menu > .category-card {padding-top:69px !important;}
 html body #home .category-menu > .cat-anim2d {--title-size:20px;}
 html body #home .category-menu > .cat-anim3d {--title-size:12px;}
 html body #home .category-menu > .cat-art2d {--title-size:31px;}
 html body #home .category-menu > .cat-story {--title-size:27px;}
 html body #home .category-menu > .cat-projects {--title-size:21px;}
 html body #home .category-menu > .category-card .category-title {left:10px !important;right:8px !important;}
}

/* Alternativa A: editorial, contraste moderado y etiquetas limpias. */
html body #home .category-menu > .category-card .category-title::after {opacity:.75;}