/* Dimension N — Alquimia digital minimalista */
:root {
    --dn-color-canvas: #070908;
    --dn-color-surface-1: #0a0d0c;
    --dn-color-surface-2: #101412;
    --dn-color-surface-glass: rgba(9, 12, 11, .82);
    --dn-color-text: #ecebe4;
    --dn-color-text-muted: #929892;
    --dn-color-border: rgba(219, 224, 214, .11);
    --dn-color-border-strong: rgba(219, 224, 214, .2);
    --dn-color-accent: #8ccfc6;
    --dn-color-accent-2: #b49a69;
    --dn-color-accent-3: #637e79;
    --dn-gradient-spectrum: linear-gradient(110deg, #8ccfc6, #b49a69);
}

body { background: var(--dn-color-canvas); font-weight: 300; }
body::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .028;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Intro silencioso y ceremonial */
.intro { background: #070908; }
.intro-noise { opacity: .025; }
.intro::after { background: radial-gradient(circle, rgba(140,207,198,.035), transparent 34%); }
.intro-phrase { font-weight: 400; letter-spacing: .42em; }
.tesseract { width: min(34vw, 235px); opacity: .72; }
#dimension-gradient stop:nth-child(1) { stop-color: #8ccfc6; }
#dimension-gradient stop:nth-child(2) { stop-color: #9aa89e; }
#dimension-gradient stop:nth-child(3) { stop-color: #b49a69; }
.intro-wordmark { font-size: clamp(2rem,5vw,4rem); font-weight: 500; }
.intro-tagline { color: var(--dn-color-accent-2); letter-spacing: .5em; }

/* Navegación reducida */
.site-header { height: 74px; padding-inline: clamp(1.25rem,5vw,5.5rem); }
.site-header.scrolled { background: rgba(7,9,8,.9); border-color: var(--line); backdrop-filter: blur(18px); }
.brand { gap: .7rem; }
.brand-glyph { width: 28px; height: 28px; opacity: .78; }
.brand-glyph i { width: 23px; height: 23px; border-color: var(--dn-color-accent); }
.brand-glyph i:nth-child(2) { width: 16px; height: 16px; border-color: var(--dn-color-accent-2); }
.brand-glyph i:nth-child(3) { width: 8px; height: 8px; border-color: var(--dn-color-text-muted); background: transparent; }
.brand-type { font-size: .98rem; font-weight: 500; letter-spacing: -.03em; }
.brand-type small { color: var(--dn-color-text-muted); letter-spacing: .25em; }
.site-nav { gap: clamp(1.2rem,2.3vw,2.4rem); }
.site-nav a { color: rgba(236,235,228,.58); font-size: .57rem; letter-spacing: .18em; }
.site-nav a::after { background: var(--dn-color-accent-2); }

/* Portada editorial: la geometría acompaña, no invade */
.gallery-hero { min-height: 720px; background: #070908; }
.gallery-image { opacity: .38; filter: saturate(.35) sepia(.08) contrast(.92); transform: scale(.9); }
.gallery-canvas { opacity: 1; isolation: isolate; }
.stage-grid { opacity: .055; background-size: 72px 72px; }
.stage-vignette {
    background:
        linear-gradient(90deg, rgba(7,9,8,.98) 0%, rgba(7,9,8,.78) 37%, rgba(7,9,8,.15) 72%),
        linear-gradient(0deg, #070908 0%, transparent 30%),
        radial-gradient(circle at 72% 42%, transparent, rgba(7,9,8,.35) 72%);
}
.gallery-copy { top: 26%; left: clamp(1.25rem,7vw,8rem); width: min(34rem,42vw); }
.eyebrow { margin-bottom: 1.2rem; color: var(--dn-color-accent-2); font-size: .55rem; font-weight: 500; letter-spacing: .32em; }
.gallery-copy h1 { max-width: 35rem; font-size: clamp(3.1rem,5vw,5.8rem); font-weight: 500; line-height: .96; letter-spacing: -.065em; }
.gallery-copy h1 em {
    color: var(--dn-color-accent-2);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -.035em;
    -webkit-text-stroke: 0;
}
.gallery-description { max-width: 29rem; margin-top: 1.5rem; color: var(--dn-color-text-muted); font-size: .9rem; line-height: 1.8; }
.model-meta { gap: .2rem .9rem; }
.model-meta span { padding: 0; border: 0; background: transparent; color: rgba(236,235,228,.43); letter-spacing: .12em; }
.model-meta span + span::before { content: "·"; margin-right: .9rem; color: var(--dn-color-accent-2); }
.text-link, .program-card a, .license-grid a { font-size: .57rem; letter-spacing: .2em; }
.viewer-tools { top: 94px; }
.viewer-tools button, .viewer-tools span { border-color: var(--line); background: rgba(7,9,8,.62); color: rgba(236,235,228,.46); }
.viewer-tools button:hover { border-color: var(--dn-color-accent-2); color: var(--dn-color-text); }
.scroll-cue { opacity: .45; }
.scroll-cue span { background: linear-gradient(var(--dn-color-accent-2),transparent); }

/* Galería sin apariencia de dashboard */
.gallery-browser { left: clamp(1.25rem,7vw,8rem); right: clamp(1.25rem,5vw,5.5rem); bottom: 2.3rem; }
.category-filters { gap: 1.15rem; margin-bottom: .8rem; }
.category-filter {
    min-width: 0;
    min-height: 2rem;
    padding: 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    color: rgba(236,235,228,.35);
    backdrop-filter: none;
}
.category-filter:hover, .category-filter.active { border-color: var(--dn-color-accent-2); background: none; color: var(--dn-color-text); }
.gallery-rail-wrap { grid-template-columns: 2.4rem minmax(0,1fr) 2.4rem; gap: .7rem; }
.rail-arrow { border-color: var(--line); background: rgba(7,9,8,.68); }
.rail-arrow:hover { border-color: var(--dn-color-accent-2); color: var(--dn-color-accent-2); }
.gallery-rail { gap: .55rem; }
.gallery-card {
    flex-basis: 11.5rem;
    min-height: 5rem;
    grid-template-columns: 3.7rem 1fr;
    gap: .7rem;
    padding: .55rem;
    border-color: var(--line);
    background: rgba(7,9,8,.72);
    backdrop-filter: blur(14px);
}
.gallery-card:hover { transform: none; border-color: var(--dn-color-border-strong); }
.gallery-card.active { border-color: rgba(180,154,105,.55); background: rgba(180,154,105,.045); }
.gallery-card img { width: 3.7rem; height: 3.7rem; opacity: .72; filter: saturate(.45); }
.gallery-card small { color: var(--dn-color-accent-2); }
.gallery-card-type { display: none; }

/* El proceso conserva la lógica nodal con una presencia discreta */
.system-strip { min-height: 24rem; padding-block: clamp(3.5rem,5vw,4.5rem); grid-template-columns: minmax(19rem,.78fr) minmax(34rem,1.22fr); background: #090c0b; border-color: var(--line); }
.system-strip::before { opacity: .035; background-size: 64px 64px; }
.system-intro h2 { font-size: clamp(2.2rem,3.6vw,4rem); font-weight: 400; }
.system-intro h2 em { color: var(--dn-color-text-muted); font-family: "Cormorant Garamond",Georgia,serif; font-style: italic; }
.node-connections path { stroke: rgba(236,235,228,.12); }
.node-connections .node-signal { stroke: var(--dn-color-accent-2); stroke-width: 1; filter: none; opacity: .8; }
.process-node { width: 9.4rem; min-height: 6.3rem; border-color: var(--line); background: rgba(10,13,12,.88); box-shadow: 0 16px 42px rgba(0,0,0,.18); }
.process-node:hover { border-color: rgba(180,154,105,.45); }
.process-node::before { width: .42rem; height: .42rem; border-color: var(--dn-color-accent-2); box-shadow: none; }
.process-node::after { content: "↗"; position: absolute; right: .7rem; bottom: .6rem; color: var(--dn-color-accent-2); font-size: .7rem; opacity: 0; transform: translate(-.2rem,.2rem); transition: opacity .2s, transform .2s; }
.process-node:hover::after, .process-node:focus-visible::after { opacity: 1; transform: translate(0); }

/* Secciones con aire y ritmo editorial */
.section-pad { padding-block: clamp(3.5rem,5vw,5rem); border-color: var(--line); }
.section-number { color: rgba(236,235,228,.25); }
.story-section { background: #070908; }
.story-lead h2, .section-heading h2, .software-copy h2, .contact-section h2 { font-weight: 400; letter-spacing: -.055em; }
.story-body { color: var(--dn-color-text-muted); }
.proof-grid { border-color: var(--line); }
.proof-grid article { min-height: 9.5rem; border-color: var(--line); }
.proof-grid strong { color: var(--dn-color-accent-2); font-family: "Cormorant Garamond",Georgia,serif; font-weight: 500; -webkit-text-stroke: 0; }

.programs-section { background: #090c0b; }
.program-grid { gap: 1px; background: var(--line); }
.program-card, .program-card.featured { min-height: 21rem; border: 0; background: #0a0d0c; }
.program-card.featured { min-height: 36rem; background: #0c100e; }
.program-card:nth-child(4) { min-height: 17rem; }
.program-card:hover { background: #0e1210; }
.wire-poly { width: min(70%,19rem); margin-block: 2rem; opacity: .5; filter: sepia(.3) saturate(.5); }
.card-tags span { border-color: var(--line); color: rgba(236,235,228,.45); }

.software-section { grid-template-columns: .55fr 1.45fr; gap: clamp(2rem,5vw,6rem); background: #070908; }
.software-copy h2 { font-size: clamp(2.8rem,4.2vw,4.8rem); }
.software-orbit { opacity: .35; }
.license-grid { grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }
.license-grid article, .license-grid article + article { min-height: 28rem; border: 0; background: #0a0d0c; }
.license-logo.rhino, .license-logo.keyshot { color: var(--dn-color-accent-2); }
.license-grid h3 { margin-top: 2.4rem; font-size: clamp(1.8rem,2.4vw,3rem); line-height: .95; }
.license-price { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; align-items: end; margin: 1.5rem 0 .5rem; padding: 1.25rem 0; border-block: 1px solid var(--line); }
.license-price strong { font: 500 clamp(1.45rem,2vw,2.2rem)/1 Sora,sans-serif; letter-spacing: -.055em; }
.license-price span { color: var(--dn-color-accent-2); font: 500 .52rem/1 Sora,sans-serif; letter-spacing: .14em; }
.license-price small { grid-column: 1 / -1; color: var(--dn-color-text-muted); font-size: .65rem; }
.license-price.quote strong { font-family: "Cormorant Garamond",Georgia,serif; font-style: italic; color: var(--dn-color-accent-2); }

.contact-section { min-height: 50vh; background: radial-gradient(circle at 50% 42%,rgba(180,154,105,.055),transparent 25%),#070908; }
.contact-section h2 { max-width: 70rem; font-size: clamp(3.2rem,7vw,7.5rem); }
.contact-actions { margin-block: 2.5rem; }
.primary-action { border-color: rgba(180,154,105,.55); background: transparent; }
.primary-action:hover { background: var(--dn-color-accent-2); color: #090b09; }

/* Aparición editorial al entrar en el viewport */
.reveal-ready .scroll-reveal {
    opacity: 0;
    translate: 0 clamp(1.25rem,3vw,2.25rem);
    filter: blur(5px);
    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        translate .95s cubic-bezier(.22,1,.36,1),
        filter .9s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--reveal-delay,0ms);
    will-change: opacity, translate, filter;
}
.reveal-ready .scroll-reveal.is-visible {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
}

@media (max-width: 980px) {
    .site-header { height: 70px; }
    .system-strip { grid-template-columns: 1fr; }
    .program-card.featured { min-height: 30rem; }
    .program-card:nth-child(4) { min-height: 23rem; }
    .license-grid { grid-template-columns: repeat(2,1fr); }
    .keyshot-card { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    .gallery-hero { min-height: 760px; }
    .gallery-image { transform: scale(.82); opacity: .32; }
    .gallery-copy { top: 16%; width: calc(100% - 2.5rem); }
    .gallery-copy h1 { max-width: 22rem; font-size: clamp(2.8rem,12vw,3.3rem); }
    .gallery-description { display: none; }
    .model-meta { gap: .55rem; }
    .model-meta span + span::before { display: none; }
    .gallery-browser { bottom: 1.7rem; }
    .category-filters { gap: 1rem; }
    .system-strip { padding-block: 4rem; }
    .process-node { width: 100%; min-height: 5rem; }
    .section-pad { padding-block: 4rem; }
    .program-card, .program-card.featured, .program-card:nth-child(4) { min-height: 22rem; }
    .contact-section h2 { font-size: clamp(3rem,15vw,4.8rem); }
    .contact-section { min-height: auto; }
    .license-grid { grid-template-columns: 1fr; }
    .license-grid article, .license-grid article + article { min-height: 26rem; }
    .keyshot-card { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-ready .scroll-reveal,
    .reveal-ready .scroll-reveal.is-visible {
        opacity: 1;
        translate: none;
        filter: none;
        transition: none;
    }
}