/* =====================================================================
   GeoByte v2 · "Descenso"
   Base: página apilada (sin JS, móvil, movimiento reducido).
   html.is-cinematic: escena fija animada con GSAP (ver js/main.js).
   ===================================================================== */

:root {
    /* Superficie: cielo de altura del semiárido */
    --sky-top: #d3dedf;
    --sky-horizon: #ebe7de;
    --hill-far: #c9b99d;
    --hill-mid: #b19c7b;
    --ground: #6b5746;

    /* Marca */
    --green: #83a848;
    --green-light: #a6cf5f;
    --green-lit: #b5d977;
    --green-deep: #6a8a39;
    --green-ink: #4f6a28;   /* verde para texto sobre claro (AA) */

    /* Estratos de un pórfido cuprífero */
    --leached: #93653b;     /* zona lixiviada: ocres y limonita */
    --leached-dark: #7d532f;
    --oxide: #24504b;       /* zona de óxidos: crisocola */
    --oxide-dark: #1c403c;
    --oxide-fleck: #4c9a8d;
    --enriched: #2a2321;    /* enriquecimiento secundario */
    --enriched-dark: #1f1a19;
    --primary-rock: #161313;

    /* Neutros */
    --ink: #1b1818;
    --ink-soft: #4b4644;
    --surface: #e9edeb;
    --surface-line: #c6cecb;
    --on-dark: #f1ece4;
    --on-dark-soft: #c2b8ae;
    --line-dark: rgba(241, 236, 228, 0.14);

    /* Tipografía */
    --font: 'Geologica', ui-sans-serif, system-ui, sans-serif;
    --facet: 'SHRP' 60;  /* filo de Geologica en títulos: aristas talladas como roca */
    --step--1: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
    --step-2: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
    --step-3: clamp(1.8rem, 1.2rem + 1.8vw, 2.9rem);
    --step-4: clamp(2.4rem, 1.4rem + 3.5vw, 4.9rem);

    /* Espaciado y retícula */
    --gutter: clamp(20px, 5vw, 72px);
    --max: 1240px;
    --nav-h: 72px;
    --quote-w: clamp(15rem, 20vw, 19rem);
    --gauge-x: clamp(28px, 3vw, 48px);
    --radius: 6px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
    html:not(.is-cinematic) { scroll-behavior: smooth; }
}
body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.6;
    font-weight: 380;
    color: var(--ink);
    background: var(--primary-rock);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
strong { font-weight: 600; }

:focus-visible { outline: 2px solid var(--green-light); outline-offset: 3px; border-radius: 2px; }

.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--ink); color: var(--on-dark); padding: 10px 16px; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

section[id] { scroll-margin-top: var(--nav-h); }

/* ---------- Tipografía ---------- */
.display {
    font-size: var(--step-4);
    line-height: 1.02;
    font-weight: 700;
    font-variation-settings: var(--facet);
    letter-spacing: -0.03em;
    max-width: 17ch;
    text-wrap: balance;
}
h2 {
    font-size: var(--step-3);
    line-height: 1.08;
    font-weight: 650;
    font-variation-settings: var(--facet);
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.1em 0 0.14em; margin: -0.1em 0 -0.14em; }
.w__in { display: inline-block; }
h3 { font-size: var(--step-1); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.lead { font-size: var(--step-1); line-height: 1.45; max-width: 36ch; }

/* ---------- Botones y enlaces ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 22px;
    font: 600 1rem/1 var(--font);
    text-decoration: none; border-radius: var(--radius);
    border: 1.5px solid transparent; cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}
.btn--primary { background: var(--green); color: var(--ink); }
.btn--primary:hover { background: var(--green-lit); }
.btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }

.text-link {
    font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px;
    text-underline-offset: 4px; text-decoration-color: var(--green-light);
}
.text-link:hover { color: var(--green-light); }

/* =====================================================================
   NAVEGACIÓN
   ===================================================================== */
.nav {
    position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
    color: var(--ink);
    background: rgba(233, 237, 235, 0.72);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid rgba(27, 24, 24, 0.08);
    transition: background-color .35s, color .35s, border-color .35s;
}
.nav[data-theme="dark"] {
    color: var(--on-dark);
    background: rgba(22, 19, 19, 0.5);
    border-bottom-color: var(--line-dark);
}
.nav__inner {
    height: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
    padding: 0 var(--gutter); display: flex; align-items: center; gap: 32px;
}
.nav__brand { position: relative; display: block; width: 150px; height: 28px; flex-shrink: 0; }
.nav__logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; transition: opacity .35s; }
.nav__logo--light { opacity: 0; }
.nav[data-theme="dark"] .nav__logo--dark { opacity: 0; }
.nav[data-theme="dark"] .nav__logo--light { opacity: 1; }

.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav-link { text-decoration: none; font-size: 0.95rem; font-weight: 500; opacity: 0.78; transition: opacity .2s; position: relative; }
.nav-link:hover, .nav-link.is-active { opacity: 1; }
.nav__links .nav-link.is-active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--green);
}
.nav-cta { min-height: 40px; padding: 0 16px; font-size: 0.95rem; }

.nav__toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; position: relative; }
.nav__toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; transition: transform .25s; }
.nav__toggle span:first-child { top: 17px; }
.nav__toggle span:last-child { top: 25px; }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.nav__mobile {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px var(--gutter) 24px;
    background: inherit; border-bottom: inherit;
}
.nav__mobile[hidden] { display: none; }
.nav__mobile .nav-link { padding: 12px 0; font-size: 1.1rem; opacity: 1; border-bottom: 1px solid rgba(127, 127, 127, 0.18); }
.nav__mobile .btn { margin-top: 16px; }

@media (max-width: 1080px) {
    .nav__links, .nav-cta { display: none; }
    .nav__toggle { display: block; }
}

/* =====================================================================
   DESCENSO · modo base (apilado)
   ===================================================================== */
.d-strata, .d-grain, .d-bore, .d-gauge, .scroll-cue { display: none; }

.d-layer {
    position: relative;
    min-height: 100svh;
    display: flex; align-items: center;
    padding: calc(var(--nav-h) + 56px) 0 88px;
    color: var(--on-dark);
    overflow: hidden;
}
.layer__inner {
    position: relative; z-index: 2;
    width: 100%; max-width: calc(var(--max) + 2 * var(--gutter));
    margin: 0 auto; padding: 0 var(--gutter);
}
.depth-tag {
    font-size: var(--step--1); font-weight: 500; font-variant-numeric: tabular-nums;
    color: var(--green-light); margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px;
}
.depth-tag::before { content: ''; width: 28px; height: 2px; background: currentColor; }

/* Fondos de cada estrato: base + clastos irregulares (tramas de tamaños primos
   para que no se lea una grilla) + estratificación suave */
.d-layer--leached, .d-zone--leached {
    background:
        radial-gradient(ellipse 3px 2px at 23% 41%, rgba(214, 160, 92, 0.45), transparent) 0 0 / 97px 71px,
        radial-gradient(ellipse 2px 2px at 67% 13%, rgba(60, 34, 16, 0.35), transparent) 0 0 / 131px 89px,
        radial-gradient(ellipse 4px 3px at 41% 77%, rgba(196, 140, 74, 0.3), transparent) 0 0 / 173px 113px,
        repeating-linear-gradient(177deg, transparent 0 61px, rgba(0, 0, 0, 0.06) 61px 63px, transparent 63px 97px, rgba(255, 220, 170, 0.05) 97px 98px),
        linear-gradient(var(--leached), var(--leached-dark));
}
.d-layer--oxide, .d-zone--oxide {
    background:
        radial-gradient(ellipse 3px 2px at 31% 44%, rgba(96, 178, 162, 0.6), transparent) 0 0 / 89px 67px,
        radial-gradient(ellipse 2px 2px at 71% 19%, rgba(166, 207, 95, 0.4), transparent) 0 0 / 127px 101px,
        radial-gradient(ellipse 5px 3px at 13% 83%, rgba(76, 154, 141, 0.35), transparent) 0 0 / 191px 139px,
        repeating-linear-gradient(178deg, transparent 0 79px, rgba(0, 0, 0, 0.08) 79px 81px, transparent 81px 131px, rgba(255, 255, 255, 0.03) 131px 132px),
        linear-gradient(var(--oxide), var(--oxide-dark));
}
.d-layer--enriched, .d-zone--enriched {
    background:
        radial-gradient(ellipse 2px 2px at 37% 58%, rgba(196, 160, 102, 0.35), transparent) 0 0 / 103px 79px,
        radial-gradient(ellipse 3px 2px at 79% 23%, rgba(110, 120, 160, 0.25), transparent) 0 0 / 149px 107px,
        repeating-linear-gradient(179deg, transparent 0 89px, rgba(255, 255, 255, 0.025) 89px 91px),
        linear-gradient(var(--enriched), var(--enriched-dark));
}

/* ---------- 0 m · Superficie ---------- */
.d-layer--surface {
    color: var(--ink);
    align-items: flex-start;
    padding-top: calc(var(--nav-h) + clamp(48px, 9vh, 110px));
    padding-bottom: 0;
}
.intro-pending .surface-mountains,
.intro-pending .surface__content,
.intro-pending .surface__quote,
.intro-pending .scroll-cue { opacity: 0; }

/* Bruma de altura que deriva entre los cerros (solo en modo película) */
.surface-haze { display: none; }
html.is-cinematic .surface-haze {
    display: block; position: absolute; left: -20%; right: -20%; bottom: 8%; height: 30%;
    background:
        radial-gradient(ellipse 30% 40% at 20% 60%, rgba(255, 255, 255, 0.55), transparent 70%),
        radial-gradient(ellipse 25% 35% at 62% 45%, rgba(255, 255, 255, 0.45), transparent 70%),
        radial-gradient(ellipse 30% 30% at 88% 65%, rgba(255, 255, 255, 0.4), transparent 70%);
    animation: haze-drift 38s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes haze-drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
html.is-underway .surface-haze { animation-play-state: paused; }

.surface-sky {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-horizon) 72%);
}
.surface-mountains {
    position: absolute; left: 0; right: 0; bottom: 0;
    /* en pantallas bajas las montañas se achican para no tocar los sellos */
    width: 100%; height: clamp(180px, calc(52vh - 130px), 420px);
    overflow: visible;  /* los cerros se extienden fuera del viewBox en pantallas anchas */
}
@media (max-width: 700px) {
    .surface-mountains { left: -50%; width: 200%; height: clamp(200px, 52vw, 300px); }
}
.surface-mountains .hill-far { fill: var(--hill-far); }
.surface-mountains .hill-mid { fill: var(--hill-mid); }
.surface-mountains .peak-main { fill: var(--green); }
.surface-mountains .peak-main-lit { fill: var(--green-lit); }
.surface-mountains .peak-side { fill: var(--green-deep); }
.surface-mountains .peak-left { fill: #93b65a; }
.surface-mountains .ground { fill: var(--ground); }

.surface__content {
    --quote-space: calc(var(--quote-w) + 48px);
    display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-bottom: 46vh;
}
.surface__content .display { max-width: min(17ch, calc(100% - var(--quote-space))); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.seals { display: flex; flex-wrap: wrap; gap: 20px 28px; margin-top: 8px; }
.seals li { display: flex; align-items: center; gap: 12px; font-size: var(--step--1); color: var(--ink-soft); max-width: 220px; line-height: 1.3; }
.seals img { height: 44px; width: auto; background: #fff; border-radius: 4px; padding: 5px 7px; box-shadow: 0 0 0 1px rgba(27, 24, 24, 0.08); }

.surface__quote {
    position: absolute; z-index: 2;
    right: var(--gutter); top: calc(var(--nav-h) + clamp(48px, 9vh, 110px));
    width: var(--quote-w);
    font-size: var(--step-1); line-height: 1.4; font-weight: 380;
    color: var(--ink-soft);
    padding-left: 18px; border-left: 2px solid var(--green);
}
@media (max-width: 1080px) {
    .surface__quote { position: relative; right: auto; top: auto; margin: 0 var(--gutter); width: auto; max-width: 34ch; order: 2; }
    .surface__content { --quote-space: 0px; }
    .d-layer--surface { flex-direction: column; }
    .surface__content { padding-bottom: 32px; }
    .surface__quote { margin-bottom: max(280px, 62vw); }
}

/* ---------- 50 m · Nosotros ---------- */
.layer__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.layer__text { display: flex; flex-direction: column; gap: 22px; }
.layer__text > p:not(.depth-tag) { max-width: 54ch; color: var(--on-dark); }
.layer__text .depth-tag { margin-bottom: -2px; }
.approach { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.approach li {
    font-size: var(--step--1); padding: 7px 12px; border-radius: 999px;
    background: rgba(27, 24, 24, 0.22); border: 1px solid rgba(241, 236, 228, 0.22);
}

.cores { display: flex; flex-direction: column; gap: 24px; }
.cores__intro { font-size: var(--step-1); line-height: 1.4; max-width: 30ch; }
.cores__list { display: flex; flex-direction: column; gap: 18px; }
.core { display: grid; gap: 8px; }
.core__bar {
    display: block; height: 22px; width: var(--w); border-radius: 11px;
    background:
        repeating-linear-gradient(90deg, transparent 0 46px, rgba(0, 0, 0, 0.28) 46px 48px),
        linear-gradient(90deg, #6b5d52, #a8998a 35%, #8a7a6c 60%, #5d5149);
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.22), inset 0 3px 0 rgba(255, 255, 255, 0.12);
}
.core:nth-child(2) .core__bar { background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(0, 0, 0, 0.28) 38px 40px), linear-gradient(90deg, #4c6f3a, #8fb35a 40%, #6a8a39 70%, #4c6f3a); }
.core__label { font-weight: 600; font-size: var(--step-1); }

/* ---------- 120 m · Soluciones ---------- */
.layer__title { max-width: 22ch; margin-bottom: clamp(32px, 5vh, 56px); }
.d-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.d-service {
    position: relative; padding-top: 20px;
    display: flex; flex-direction: column; gap: 14px;
}
.d-service::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--oxide-fleck); transform: scaleX(var(--draw, 1)); transform-origin: left;
}
.d-service ul { display: grid; gap: 8px; }
.d-service li { padding-left: 20px; position: relative; color: var(--on-dark-soft); }
.d-service li::before { content: ''; position: absolute; left: 0; top: 0.68em; width: 9px; height: 9px; border-radius: 50%; background: var(--oxide-fleck); box-shadow: 0 0 0 3px rgba(76, 154, 141, 0.25); }
.d-service p { color: var(--on-dark-soft); }

/* ---------- 190 m · Impacto ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 24px 24px 8px 0; }
.stat { position: relative; }
.stat + .stat { padding-left: 24px; }
.stat + .stat::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
    background: var(--line-dark); transform: scaleY(var(--draw, 1)); transform-origin: top;
}
.stat dd {
    font-size: clamp(2.6rem, 1.4rem + 3vw, 4.6rem); line-height: 0.95; font-weight: 700;
    font-variation-settings: var(--facet); letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums; color: var(--green-light);
}
.stat__pre, .stat__post { font-weight: 500; opacity: 0.85; }
.stat dt { color: var(--on-dark-soft); max-width: 18ch; }

@media (max-width: 900px) {
    .layer__grid { grid-template-columns: 1fr; }
    .d-services { grid-template-columns: 1fr; gap: 32px; }
    .stats { grid-template-columns: 1fr 1fr; }
    .stat:nth-child(3) { padding-left: 0; }
    .stat:nth-child(3)::before { display: none; }
    .stat:nth-child(n + 3) { border-top: 1px solid var(--line-dark); }
}

/* =====================================================================
   DESCENSO · modo película
   ===================================================================== */
html.is-cinematic .descent {
    position: relative; height: 100vh; overflow: hidden;
    background: var(--primary-rock);
}
html.is-cinematic .d-layer {
    position: absolute; inset: 0; min-height: 0;
    padding-top: var(--nav-h); padding-bottom: 0;
    background: none;
}
html.is-cinematic .d-layer:not(.d-layer--surface) { visibility: hidden; }
html.is-cinematic .d-layer .layer__inner { padding-left: max(var(--gutter), calc(var(--gauge-x) + 150px)); }
html.is-cinematic .depth-tag { display: none; }
html.is-cinematic .d-layer .section__head { margin-bottom: clamp(20px, 3.5vh, 44px); }
html.is-cinematic .product { padding: clamp(12px, 2.2vh, 26px) 0; }
html.is-cinematic .download { padding: clamp(14px, 2.4vh, 22px) 0; }
html.is-cinematic .form { gap: clamp(10px, 1.8vh, 18px); }
html.is-cinematic .field input, html.is-cinematic .field textarea { padding: 10px 12px; }
html.is-cinematic .field textarea { min-height: clamp(70px, 11vh, 120px); }
html.is-cinematic .contact__list { gap: clamp(8px, 1.4vh, 16px); }
html.is-cinematic .contact__list div { padding-bottom: clamp(8px, 1.4vh, 14px); }
html.is-cinematic .d-layer--surface .surface__content { gap: clamp(16px, 3vh, 28px); }

/* Indicación de scroll en la superficie; se apaga al comenzar el descenso */
html.is-cinematic .scroll-cue {
    display: flex; align-items: center; gap: 12px;
    position: absolute; z-index: 2; left: var(--gutter); bottom: clamp(36px, 6vh, 56px);
    padding: 8px 16px 8px 14px; border-radius: 999px;
    background: rgba(233, 237, 235, 0.9); color: var(--ink);
    font-size: 0.88rem; font-weight: 500;
    box-shadow: 0 0 0 1px rgba(27, 24, 24, 0.08);
    transition: opacity .3s;
}
.scroll-cue__bit { position: relative; width: 2px; height: 22px; border-radius: 1px; background: rgba(27, 24, 24, 0.2); }
.scroll-cue__bit::after {
    content: ''; position: absolute; left: -2px; top: 0; width: 6px; height: 6px; border-radius: 50%;
    background: var(--green-deep);
    animation: cue-drill 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cue-drill {
    0% { transform: translateY(-6px); opacity: 0; }
    25% { opacity: 1; }
    100% { transform: translateY(22px); opacity: 0; }
}
html.is-underway .scroll-cue { opacity: 0; }
html.is-underway .scroll-cue__bit::after { animation-play-state: paused; }
@media (max-height: 820px) {
    html.is-cinematic .d-layer .section__head { gap: 12px; margin-bottom: 18px; }
    html.is-cinematic .product { padding: 9px 0; }
    html.is-cinematic .step { gap: 8px; padding-top: 14px; }
}

html.is-cinematic .d-layer--surface { z-index: 3; padding-top: calc(var(--nav-h) + clamp(40px, 8vh, 96px)); }
html.is-cinematic .d-layer--surface .layer__inner { padding-left: var(--gutter); }
html.is-cinematic .surface__content { padding-bottom: 0; }

html.is-cinematic .d-strata {
    display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 1; will-change: transform;
}
html.is-cinematic .d-zone { height: 100vh; position: relative; }
html.is-cinematic .d-zone::before {
    /* contacto entre estratos */
    content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 36px;
    background: inherit; filter: brightness(0.75);
    clip-path: polygon(0 50%, 8% 35%, 17% 55%, 29% 40%, 41% 60%, 55% 38%, 68% 58%, 80% 42%, 91% 57%, 100% 45%, 100% 100%, 0 100%);
}

html.is-cinematic .d-layer:not(.d-layer--surface) { z-index: 2; }

/* Partículas de roca en primer plano: se mueven más rápido que los estratos (profundidad) */
html.is-cinematic .d-grain {
    display: block; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 240px);
    z-index: 1; pointer-events: none; will-change: transform;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 236, 210, 0.16) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 67% 9%, rgba(0, 0, 0, 0.32) 0 2px, transparent 3px),
        radial-gradient(circle at 38% 52%, rgba(255, 236, 210, 0.12) 0 1px, transparent 2px),
        radial-gradient(circle at 84% 63%, rgba(0, 0, 0, 0.28) 0 2.5px, transparent 3.5px),
        radial-gradient(circle at 23% 87%, rgba(255, 236, 210, 0.14) 0 2px, transparent 3px),
        radial-gradient(circle at 55% 79%, rgba(0, 0, 0, 0.22) 0 1.5px, transparent 2.5px);
    background-size: 240px 240px;
}

html.is-cinematic .d-clasts { display: block; position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.d-clasts { display: none; }
.d-clast { position: absolute; top: 0; left: 0; will-change: transform; }
.d-clast svg { width: 100%; height: 100%; overflow: visible; }
.d-clast--far polygon { fill: rgba(0, 0, 0, 0.16); }
.d-clast--near polygon { fill: rgba(12, 9, 9, 0.5); stroke: rgba(255, 240, 220, 0.08); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* Línea de sondaje: lo perforado hasta ahora, de 0 m a la broca */
html.is-cinematic .d-bore {
    display: block; position: absolute; z-index: 4;
    left: calc(var(--gauge-x) - 1.5px); top: calc(var(--nav-h) + 6vh); bottom: 8vh; width: 3px;
    background: linear-gradient(rgba(131, 168, 72, 0), var(--green) 12%, var(--green-light));
    box-shadow: 0 0 16px rgba(166, 207, 95, 0.55);
    transform-origin: top; transform: scaleY(0);
}
html.is-cinematic .d-gauge {
    display: block; position: absolute; z-index: 5;
    left: var(--gauge-x); top: calc(var(--nav-h) + 6vh); bottom: 8vh;
    width: 140px; pointer-events: none;
    color: var(--on-dark); opacity: 0;
}
.d-gauge__scale { position: absolute; inset: 0; }
.d-gauge__scale::before { content: ''; position: absolute; left: -0.5px; top: 0; bottom: 0; width: 1px; background: rgba(241, 236, 228, 0.16); }
.d-gauge__scale li {
    position: absolute; left: 19px; top: calc(var(--at) * 100%);
    transform: translateY(-50%);
    font-size: 0.78rem; font-variant-numeric: tabular-nums; opacity: 0.5; transition: opacity .3s;
}
.d-gauge__scale li.is-passed { opacity: 0.9; }
.d-gauge__scale li.is-current { opacity: 0; }
.d-gauge__scale li.is-passed::before { background: var(--green-light); width: 11px; }
.d-gauge__scale li::before { content: ''; position: absolute; left: -19px; top: 50%; width: 9px; height: 1px; background: currentColor; }
.d-gauge__marker {
    position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
    display: flex; align-items: center;
}
.d-gauge__marker::before {
    content: ''; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    /* --drill (0..1) sube mientras se avanza: la broca brilla al perforar */
    background: var(--green-light);
    box-shadow:
        0 0 0 calc(5px + 5px * var(--drill, 0)) rgba(166, 207, 95, 0.22),
        0 0 calc(18px + 30px * var(--drill, 0)) rgba(166, 207, 95, 0.85);
    transform: scale(calc(1 + 0.3 * var(--drill, 0)));
}
/* Corona de perforación de perfil, perforando hacia abajo: la cara de corte queda en la
   profundidad actual y las estrías se desplazan para sugerir el giro */
.d-gauge__bit {
    position: absolute; left: 50%; top: 50%; width: 24px; height: 29px; max-width: none; overflow: visible;
}
.d-gauge__bit .shank, .d-gauge__bit .body { stroke: var(--green-light); stroke-width: 0.8; stroke-linejoin: round; }
.d-gauge__flutes rect { fill: #0c0a0a; opacity: 0.75; }
.d-gauge__bit .b { fill: var(--green-light); }
.d-gauge__val, .d-gauge__zone {
    position: absolute; left: 34px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.d-gauge__val { top: -14px; font-size: 1rem; font-weight: 600; }
.d-gauge__zone { top: 8px; font-size: 0.78rem; color: var(--on-dark-soft); }

/* =====================================================================
   CAPAS PROFUNDAS (260 m → 500 m)
   ===================================================================== */
.d-layer--hypogene, .d-zone--hypogene {
    /* zona primaria: roca gris con destellos de calcopirita */
    background:
        radial-gradient(ellipse 2px 2px at 29% 61%, rgba(214, 178, 84, 0.75), transparent) 0 0 / 83px 67px,
        radial-gradient(ellipse 3px 2px at 73% 17%, rgba(201, 162, 74, 0.5), transparent) 0 0 / 139px 97px,
        radial-gradient(ellipse 2px 1px at 51% 83%, rgba(230, 200, 120, 0.45), transparent) 0 0 / 191px 151px,
        repeating-linear-gradient(176deg, transparent 0 101px, rgba(255, 255, 255, 0.025) 101px 103px),
        linear-gradient(#26262b, #1d1d21);
}
.d-layer--potassic, .d-zone--potassic {
    /* núcleo potásico: feldespato rosado y biotita */
    background:
        radial-gradient(ellipse 4px 3px at 37% 43%, rgba(196, 128, 116, 0.5), transparent) 0 0 / 79px 61px,
        radial-gradient(ellipse 2px 2px at 67% 79%, rgba(20, 14, 14, 0.6), transparent) 0 0 / 113px 89px,
        radial-gradient(ellipse 3px 2px at 17% 13%, rgba(214, 160, 148, 0.3), transparent) 0 0 / 163px 127px,
        linear-gradient(#3f2c2b, #2f2120);
}
.d-layer--propylitic, .d-zone--propylitic {
    /* halo propilítico: clorita y epidota */
    background:
        radial-gradient(ellipse 3px 2px at 41% 37%, rgba(150, 168, 80, 0.5), transparent) 0 0 / 91px 71px,
        radial-gradient(ellipse 2px 2px at 79% 71%, rgba(96, 130, 90, 0.5), transparent) 0 0 / 131px 101px,
        repeating-linear-gradient(178deg, transparent 0 83px, rgba(0, 0, 0, 0.1) 83px 85px),
        linear-gradient(#2c3a31, #222d26);
}
.d-layer--host, .d-zone--host {
    /* roca de caja: andesita */
    background:
        radial-gradient(ellipse 3px 2px at 23% 53%, rgba(170, 170, 160, 0.25), transparent) 0 0 / 97px 73px,
        radial-gradient(ellipse 2px 2px at 61% 19%, rgba(0, 0, 0, 0.35), transparent) 0 0 / 127px 109px,
        repeating-linear-gradient(177deg, transparent 0 113px, rgba(255, 255, 255, 0.03) 113px 115px),
        linear-gradient(#303337, #26282b);
}
.d-layer--bottom, .d-zone--bottom { background: linear-gradient(#1c1b1d, var(--primary-rock)); }

.section__head { display: grid; gap: 18px; margin-bottom: clamp(32px, 5vh, 64px); max-width: 760px; }
.section__head > p:not(.depth-tag) { color: var(--on-dark-soft); max-width: 56ch; }
.section__head .depth-tag, .equipment__text .depth-tag, .contact__info .depth-tag { margin-bottom: -4px; }

/* ---------- Productos ---------- */
.products { border-top: 1px solid var(--line-dark); }
.product {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.6fr) minmax(0, 1.5fr);
    gap: 24px; align-items: baseline;
    padding: clamp(24px, 3.5vh, 36px) 0;
}
.product::after, .download::after, .step::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1px;
    background: var(--line-dark); transform: scaleX(var(--draw, 1)); transform-origin: left;
}
.product::after, .download::after { bottom: 0; }
.step::after { top: 0; }
.product__name {
    font-size: var(--step-2); font-weight: 650; letter-spacing: -0.02em;
    font-variation-settings: var(--facet);
}
.product__use { color: var(--green-light); font-weight: 500; }
.product__desc { color: var(--on-dark-soft); max-width: 52ch; }
@media (max-width: 760px) {
    .product { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Cómo trabajamos ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: step; }
.step { position: relative; counter-increment: step; display: grid; gap: 12px; align-content: start; padding-top: 20px; }
.step::before {
    /* --num (0..1) lo anima el descenso: el número sube al aparecer */
    opacity: var(--num, 1); transform: translateY(calc((1 - var(--num, 1)) * 0.5em));
    content: counter(step); font-size: var(--step-2); font-weight: 700; line-height: 1;
    font-variation-settings: var(--facet);
    color: var(--green-light); font-variant-numeric: tabular-nums;
}
.step p { color: var(--on-dark-soft); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Equipos ---------- */
.equipment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.equipment__text { display: grid; gap: 18px; }
.equipment__text p { color: var(--on-dark-soft); max-width: 48ch; }
.downloads { border-top: 1px solid var(--line-dark); }
.download {
    position: relative;
    display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: center;
    padding: 22px 0; text-decoration: none;
}
.download__name { font-size: var(--step-1); font-weight: 600; }
.download__meta { grid-row: 2; color: var(--on-dark-soft); font-size: var(--step--1); }
.download__action {
    grid-row: 1 / span 2; grid-column: 2;
    font-weight: 600; padding: 10px 16px; border-radius: var(--radius);
    border: 1.5px solid rgba(241, 236, 228, 0.4); transition: background-color .2s, color .2s, border-color .2s;
}
.download:hover .download__action { background: var(--green); border-color: var(--green); color: var(--ink); }
@media (max-width: 900px) { .equipment { grid-template-columns: 1fr; } }

/* ---------- Clientes ---------- */
.logos { display: grid; gap: 14px; }
.logos--clients { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.logos--partners { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; }
.logos li {
    height: clamp(92px, 13vh, 128px); display: flex; align-items: center; justify-content: center;
    padding: 22px 26px; background: #fff; border-radius: var(--radius);
}
.logos img { max-height: 64px; max-width: 100%; object-fit: contain; }
.logos img.is-padded { max-height: none; height: 100%; }
.logos img.is-wide { max-height: 100%; }  /* logo recortado: usa todo el alto de la tarjeta */
.logos li:has(img.is-padded) { padding: 4px; }
.logos__title { margin: clamp(28px, 5vh, 64px) 0 16px; font-size: var(--step-1); }
@media (max-width: 900px) {
    .logos--clients, .logos--partners { grid-template-columns: 1fr 1fr; }
    .logos li { height: 104px; }
    .logos img.is-padded { height: 96px; }
}

/* ---------- Contacto ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); }
.contact__info { display: grid; gap: 22px; align-content: start; }
.contact__info > p:not(.depth-tag) { color: var(--on-dark-soft); max-width: 44ch; }
.contact__list { display: grid; gap: 16px; margin-top: 12px; }
.contact__list div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-dark); }
.contact__list dt { color: var(--on-dark-soft); }
.contact__list a { text-decoration: none; font-weight: 500; }
.contact__list a:hover { color: var(--green-light); text-decoration: underline; text-underline-offset: 3px; }

.form { display: grid; gap: 20px; align-content: start; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; }
.field__opt { font-weight: 400; color: var(--on-dark-soft); }
.field input, .field textarea {
    width: 100%; font: inherit; color: var(--on-dark);
    background: rgba(241, 236, 228, 0.06); border: 1.5px solid rgba(241, 236, 228, 0.22); border-radius: var(--radius);
    padding: 13px 14px; transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green-light); box-shadow: 0 0 0 3px rgba(166, 207, 95, 0.25); }
.field input::placeholder, .field textarea::placeholder { color: #8f8780; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__submit { justify-self: start; min-width: 200px; }
.form__submit:disabled { opacity: 0.6; cursor: progress; }
.form__status { padding: 14px 16px; border-radius: var(--radius); font-weight: 500; }
.form__status[data-state="success"] { background: rgba(166, 207, 95, 0.16); color: var(--green-light); }
.form__status[data-state="error"] { background: rgba(232, 120, 96, 0.16); color: #f2a593; }
@media (max-width: 900px) {
    .contact { grid-template-columns: 1fr; }
    .contact__list div { grid-template-columns: 90px 1fr; }
}

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--primary-rock); color: var(--on-dark); padding: 40px 0; border-top: 1px solid var(--line-dark); }
.footer__inner {
    max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
    display: grid; grid-template-columns: auto 1fr auto; gap: 20px 48px; align-items: center;
}
.footer__logo { width: 150px; height: auto; }
.footer__claim { color: var(--on-dark-soft); max-width: 44ch; font-size: var(--step--1); }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer__links a { text-decoration: none; opacity: 0.8; }
.footer__links a:hover { opacity: 1; color: var(--green-light); }
.footer__legal { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--line-dark); color: var(--on-dark-soft); font-size: var(--step--1); }
@media (max-width: 900px) { .footer__inner { grid-template-columns: 1fr; } }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}