/* Odontograma FDI + selector VITA · usa las variables de style.css (--gold, --gold-2, --bg-3, --line) */
.odg{gap:10px}
.odg-lienzo{position:relative;width:100%;max-width:470px;margin:4px auto 0;align-self:center;padding:14px 10px 6px;border-radius:18px;
  background:radial-gradient(120% 90% at 50% 45%,#16151a 0%,#0b0b0e 70%);
  border:1px solid var(--line-soft,rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.odg-svg{display:block;width:100%;height:auto;overflow:visible}

/* encía */
.odg-encia-banda{fill:none;stroke:#3a1d24;stroke-width:46;stroke-linecap:round;stroke-linejoin:round;opacity:.55}

/* dientes */
.odg-d{cursor:pointer;outline:none}
.odg-esmalte{fill:var(--odg-e);stroke:#8d8270;stroke-width:.7;transition:fill .18s ease,stroke .18s ease}
.odg-fisura{fill:none;stroke:#a8987a;stroke-width:.8;stroke-linecap:round;opacity:.75;transition:stroke .18s}
.odg-fosa{fill:#9c8b6b;opacity:.7}
.odg-d:hover .odg-esmalte{fill:var(--odg-h);stroke:var(--gold,#d4af37)}
.odg-d:focus-visible .odg-esmalte{stroke:#fff;stroke-width:1.8}
.odg-d[aria-checked="true"] .odg-esmalte{fill:var(--odg-o);stroke:var(--gold-2,#f5d57e);stroke-width:1.1}
.odg-d[aria-checked="true"] .odg-fisura{stroke:#7a5a12}
.odg-d[aria-checked="true"] .odg-fosa{fill:#6e5110}

/* números FDI */
.odg-nums text{font:600 9.5px/1 'Inter',system-ui,sans-serif;fill:rgba(243,239,230,.38);text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .18s}
.odg-nums text.on{fill:var(--gold-2,#f5d57e)}

/* guías */
.odg-guias line{stroke:rgba(212,175,55,.35);stroke-dasharray:3 4}
.odg-guias text{font:500 10px 'Inter',system-ui,sans-serif;fill:rgba(243,239,230,.35);text-anchor:middle;letter-spacing:.06em}
.odg-guias .odg-arc{font-size:9px;letter-spacing:.24em;text-transform:uppercase;fill:rgba(212,175,55,.55)}
.odg-lectura{font:500 22px 'Cormorant Garamond',Georgia,serif;fill:var(--gold-2,#f5d57e);text-anchor:middle;letter-spacing:.04em}

.odg-ayuda{margin:6px 0 0;text-align:center;font-size:.86rem;color:var(--ink-faint,rgba(243,239,230,.5))}
.odg-atajos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}
.odg-atajos button{font:inherit;font-size:.82rem;color:var(--ink-soft,#ddd);background:var(--bg-3,#131318);border:1px solid var(--line,rgba(212,175,55,.22));
  border-radius:999px;padding:7px 14px;cursor:pointer;transition:border-color .2s,color .2s}
.odg-atajos button:hover{border-color:var(--gold);color:var(--gold-2)}
.odg-atajos .odg-limpiar{border-color:transparent;background:none;text-decoration:underline;color:var(--ink-faint)}

.arch-intro .odg-d{opacity:0;animation:odg-in .45s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*22ms)}
@keyframes odg-in{from{opacity:0}to{opacity:1}}

/* selector de color VITA */
.vita-oculto{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
.vita{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.vita[hidden]{display:none}
.vita-m{display:flex;flex-direction:column;align-items:center;gap:5px;width:50px;padding:7px 0 6px;border-radius:10px;cursor:pointer;
  background:var(--bg-3,#131318);border:1px solid rgba(255,255,255,.08);color:var(--ink-soft,#ddd);font:600 .72rem 'Inter',system-ui,sans-serif;transition:border-color .2s,box-shadow .2s}
.vita-m i{display:block;width:24px;height:32px;border-radius:42% 42% 48% 48%;box-shadow:inset 0 -6px 9px rgba(0,0,0,.14),inset 0 3px 5px rgba(255,255,255,.6)}
.vita-m:hover{border-color:var(--line,rgba(212,175,55,.4))}
.vita-m[aria-checked="true"]{border-color:var(--gold,#d4af37);color:var(--gold-2,#f5d57e);box-shadow:0 0 0 2px rgba(212,175,55,.3)}
.vita-texto{width:auto;padding:7px 12px;justify-content:center}
.color-split .vita{margin-top:6px}
.color-split .vita-m{width:44px}
@media (max-width:560px){.vita-m{width:44px}.odg-lienzo{padding:8px 4px 4px}}
@media (prefers-reduced-motion:reduce){.arch-intro .odg-d{animation:none;opacity:1}.odg-esmalte{transition:none}}
.odg-cuspide{fill:#fff;opacity:.35;pointer-events:none}
.odg-d[aria-checked="true"] .odg-cuspide{fill:#fff6d6;opacity:.45}
/* el bloque de color usa todo el ancho para que las muestras quepan en pocas filas */
#colorField:has(.vita){grid-column:1/-1}
.vita .vita-texto{width:auto;white-space:nowrap;padding:7px 12px}
.odg-hit{fill:transparent;stroke:transparent;stroke-width:7;pointer-events:all}

/* ── Odontograma 3D ── */
.odg3d{gap:10px}
.odg3d-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.odg3d-modos{display:inline-flex;padding:3px;border:1px solid var(--line,rgba(212,175,55,.22));border-radius:999px}
.odg3d-modos button{font:inherit;font-size:.8rem;color:var(--ink-soft,#ddd);background:none;border:0;border-radius:999px;padding:6px 14px;cursor:pointer}
.odg3d-modos button[aria-pressed="true"]{background:var(--gold,#d4af37);color:#000;font-weight:600}
.odg3d-escena{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1/1.05;border-radius:20px;overflow:hidden;
  background:radial-gradient(85% 70% at 50% 45%,#1c1a16 0%,#0a0a0b 60%,#050506 100%);box-shadow:inset 0 0 0 1px rgba(212,175,55,.16)}
.odg3d-escena canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.odg3d-escena canvas.sobre{cursor:pointer}
.odg3d-nums{position:absolute;inset:0;pointer-events:none}
.odg3d-nums span{position:absolute;transform:translate(-50%,-50%);font:600 10px/1 'Inter',system-ui,sans-serif;color:rgba(243,239,230,.4);transition:color .25s}
.odg3d-nums span.on{color:var(--gold-2,#f5d57e)}
.odg3d-lectura{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:500 1.35rem 'Cormorant Garamond',Georgia,serif;color:var(--gold-2,#f5d57e);letter-spacing:.06em;pointer-events:none}
.odg3d-cargando{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-faint,rgba(243,239,230,.5));font-size:.88rem}
.odg3d-ayuda{margin:2px 0 0;text-align:center;font-size:.86rem;color:var(--ink-faint,rgba(243,239,230,.5))}
.odg3d-atajos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.odg3d-atajos button{font:inherit;font-size:.82rem;color:var(--ink-soft,#ddd);background:var(--bg-3,#131318);border:1px solid var(--line,rgba(212,175,55,.22));border-radius:999px;padding:7px 14px;cursor:pointer}
.odg3d-atajos button:hover{border-color:var(--gold);color:var(--gold-2)}
.odg3d-atajos .odg3d-limpiar{border-color:transparent;background:none;text-decoration:underline;color:var(--ink-faint)}
.odg3d-credito{margin:0;text-align:center;font-size:.72rem;color:rgba(243,239,230,.3)}

/* ── Medalla 3D del logo (inicio) ── */
.hero-logo .medalla3d{position:absolute;z-index:3;left:50%;top:50%;width:155%;aspect-ratio:1/1;transform:translate(-50%,-50%)}
.hero-logo .medalla3d canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.hero-logo .medalla3d canvas:active{cursor:grabbing}
.hero-logo.medalla-lista img{visibility:hidden}