/* ONLYDROP V38 — sistema visual único. Cargar al final de todas las hojas.
   Editar estos tokens primero: todas las áreas principales los heredan. */
:root {
  --od-bg: #0b1015;
  --od-surface: #151e25;
  --od-surface-raised: #202b33;
  --od-ink: #f4f0e8;
  --od-muted: #a9b9c0;
  --od-cool: #86c6d2;
  --od-hot: #f1a277;
  --od-line: rgba(134,198,210,.34);
  --od-display: 'Syne', 'Arial Black', sans-serif;
  --od-body: 'Manrope', Arial, sans-serif;
  --od-mono: 'IBM Plex Mono', monospace;
  --od-serif: 'Instrument Serif', Georgia, serif;
  /* Compatibilidad con estilos antiguos y ornamentos. */
  --ink:var(--od-bg);--ink2:var(--od-surface);--txt:var(--od-ink);
  --sky:var(--od-cool);--cobalt:#4b8395;--amber:var(--od-hot);
  --maroon:#b56863;--peach:#e6bba5;--yellow:#d5bd83;
  --coral:var(--od-hot);--cyan:var(--od-cool);--ice:var(--od-ink);
  --font-display:var(--od-display) !important;
  --font-body:var(--od-body) !important;
  --display:var(--od-display);--sans:var(--od-body);
  --mono:var(--od-mono);--pixel:var(--od-mono);
  --f-pop:var(--od-display);--f-sty:var(--od-display);
  --f-goth:var(--od-serif);--f-pix:var(--od-mono);--f-txt:var(--od-body);
}
html body, html body .views {
  background:var(--od-bg) !important;
  color:var(--od-ink) !important;
}
html body, html body button, html body input, html body textarea,
html body .about-copy, html body .index-description p,
html body .nav a, html body .contact-email, html body .social-links a {
  font-family:var(--od-body) !important;
}
/* Todos los encabezados usan la misma familia expresiva, excepto detalles serif intencionales. */
html body h1, html body h2, html body h3,
html body .wordmark, html body .section-heading h2,
html body #workHeading, html body .project-meta h3,
html body #about .about-section h2, html body #contact .contact-section h2,
html body .project-dialog h2, html body .od-rail a,
html body #home .category-menu .category-title {
  font-family:var(--od-display) !important;
  letter-spacing:-.055em !important;
  font-weight:800 !important;
}
/* Rótulos, coordenadas y UI técnica: monoespaciada consistente. */
html body .eyebrow, html body .top-note, html body .index-topline,
html body .index-footer, html body .menu-heading,
html body .index-kicker, html body .index-alias,
html body .index-meta, html body .category-info p,
html body .visual-label, html body .visual-number,
html body .work-topline, html body .filter,
html body .category-switcher button, html body .object-caption,
html body .object-readout, html body .hud-coordinate,
html body .art-tag, html body .art-number, html body .project-type,
html body .contact-top, html body .about-portrait figcaption,
html body .dialog-index, html body .dialog-actions,
html body .od-hud, html body .od-pixel {
  font-family:var(--od-mono) !important;
  letter-spacing:.065em;
}
/* Portada: eliminar completamente la sombra paralela y el glow del nombre. */
html body #home .index-intro h1,
html body #home .index-intro h1 span {
  font-family:var(--od-display) !important;
  font-weight:800 !important;
  letter-spacing:-.075em !important;
  line-height:.92 !important;
  text-shadow:none !important;
  filter:none !important;
  -webkit-text-stroke:0 !important;
}
html body #home .index-intro h1 {color:var(--od-ink) !important;}
html body #home .index-intro h1 span {
  color:var(--od-hot) !important;
  font-size:1em !important;
}
html body .wordmark {font-size:clamp(23px,2vw,30px);text-shadow:none !important;letter-spacing:-.07em !important;}
html body .wordmark span {color:var(--od-cool) !important;}
html body .wordmark i {color:var(--od-hot) !important;}
/* Escenario y superficies: la paleta permanece neutra y los ornamentos son los acentos. */
html body #home .index-screen {
  background:
    radial-gradient(ellipse 52% 43% at 24% 17%,rgba(74,128,146,.15),transparent 72%),
    radial-gradient(ellipse 43% 40% at 90% 77%,rgba(191,110,89,.09),transparent 72%),
    var(--od-bg) !important;
}
html body .topbar {
  background:rgba(11,16,21,.89) !important;
  border-bottom:1px solid var(--od-line) !important;
}
html body .top-note, html body .index-topline,
html body .index-kicker, html body .index-alias,
html body .menu-heading, html body .index-meta,
html body .index-footer {color:var(--od-cool) !important;}
html body .index-description p, html body .about-copy,
html body .section-aside {color:var(--od-muted) !important;}
html body .menu-heading span:last-child,
html body .index-kicker span, html body .index-footer a,
html body .index-alias i {color:var(--od-hot) !important;}
html body .nav a:hover,html body .nav a.active {
  color:var(--od-bg) !important;background:var(--od-cool) !important;
}
html body .nav a, html body .menu-toggle,
html body .motion-toggle {color:var(--od-ink) !important;}
html body .od-pixel {color:var(--od-hot) !important;text-shadow:none !important;}
html body .od-slash.s1 {background:var(--od-cool) !important;}
html body .od-slash.s2 {background:#426b80 !important;}
html body .od-slash.s3 {background:var(--od-hot) !important;}
html body .od-fog {
  background:radial-gradient(ellipse 44% 20% at 26% 60%,rgba(91,137,146,.12),transparent 72%),
  radial-gradient(ellipse 45% 24% at 75% 68%,rgba(207,126,96,.07),transparent 73%) !important;
}
/* Secciones del índice: rótulos por encima del recorte; se conserva el arreglo V37. */
html body #home .category-menu > .category-card .category-title {
  color:var(--od-ink) !important;
  text-shadow:none !important;
  font-size:clamp(15px,1.55vw,23px) !important;
  line-height:1.11 !important;
  min-height:49px;
}
html body #home .category-menu > .category-card .category-visual {
  background-color:var(--od-surface) !important;
  border-color:var(--od-line) !important;
}
html body #home .category-info {border-color:var(--od-line) !important;}
html body #home .category-info p {color:var(--od-muted) !important;}
html body #home .category-arrow {color:var(--od-hot) !important;}
html body #home .category-visual .visual-label {color:var(--od-ink) !important;}
html body #home .category-visual .visual-number {color:var(--od-cool) !important;}
/* Las cinco categorías pueden diferenciarse por acentos sutiles, sin cinco fondos incompatibles. */
html body #home .cat-anim2d {--category-accent:var(--od-cool)}
html body #home .cat-anim3d {--category-accent:#b0bdcc}
html body #home .cat-art2d {--category-accent:var(--od-hot)}
html body #home .cat-story {--category-accent:#d2b98d}
html body #home .cat-projects {--category-accent:#a6c8ae}
html body #home .category-card:hover .category-title {color:var(--category-accent) !important;}
/* Trabajo: se respetan las composiciones y el color acento, se armoniza su tipografía. */
html body #work, html body #work .work-section,
html body #about .about-section, html body #contact .contact-section {
  background-color:var(--od-bg) !important;
  color:var(--od-ink) !important;
}
html body #work .section-heading h2,
html body #work .project-meta h3,
html body .project-dialog h2 {
  font-family:var(--od-display) !important;
  font-weight:800 !important;
  text-shadow:none !important;
  letter-spacing:-.06em !important;
}
html body #work[data-cat], html body .project-dialog[data-cat] {
  --hf:var(--od-display);
  --hs:1;
}
html body #work[data-cat=animation2d],html body .project-dialog[data-cat=animation2d] {--acc:#86c6d2}
html body #work[data-cat=animation3d],html body .project-dialog[data-cat=animation3d] {--acc:#b0bdcc}
html body #work[data-cat=art2d],html body .project-dialog[data-cat=art2d] {--acc:#f1a277}
html body #work[data-cat=storyboard],html body .project-dialog[data-cat=storyboard] {--acc:#d2b98d}
html body #work[data-cat=projects],html body .project-dialog[data-cat=projects] {--acc:#a6c8ae}
html body #work .filter,html body #work .category-switcher button {
  border-color:var(--od-line) !important;
}
html body #work .filter:hover,html body #work .filter.active,
html body #work .category-switcher button:hover,
html body #work .category-switcher button.active {
  background:var(--od-cool) !important;color:var(--od-bg) !important;
}
html body #about .about-section h2 em,
html body #contact .contact-section h2 em {
  font-family:var(--od-serif) !important;
  font-weight:400 !important;
  font-style:italic;
  color:var(--od-hot) !important;
  letter-spacing:-.035em !important;
}
html body .contact-email, html body .social-links a,html body .back-index {color:var(--od-ink) !important;}
html body .contact-email:hover, html body .social-links a:hover,html body .back-index:hover {color:var(--od-cool) !important;}
@media(max-width:900px) {
  html body #home .category-menu > .category-card .category-title {font-size:clamp(16px,2.4vw,22px) !important;min-height:45px;}
}
@media(max-width:540px) {
  html body #home .category-menu > .category-card .category-title {font-size:15px !important;min-height:40px;}
}