/* ════════════════════════════════════════════════
   CIMA DIGITAL · Divisiones entre secciones (compartido)
   La Cordillera, variante D «Profundidad», con 200 px entre cimas: la que se
   eligió en index-divisiones el 14-09-2026. assets/divisiones.js pone un
   <div class="dv"> de alto 0 después de cada sección .f9s de <main> (el
   último, contra el pie): la sección siguiente asoma en tres cordones,
   teñidos de salvia y olivo como las capas del hero, y al bajar por la
   página los dos del fondo suben detrás del de adelante. Los cortes crecen
   hasta la cumbre (el Mini-Audit) y bajan después.
   Las capas van con z-index 1: sobre los halos de las secciones y bajo el
   texto, siempre dentro del padding (--arr hacia arriba y --ab hacia abajo
   salen del padding real de cada sección). Los tonos de cada lado salen de
   la clase de la sección (.f-dia, .f-crema, .f-tostado) y del modo; los
   fondos de las secciones los pone assets/modo.css.
   ════════════════════════════════════════════════ */

/* ── Tonos a cada lado del corte, por modo (--a arriba, --b abajo) ── */
.dv{position:relative;height:0;pointer-events:none;--arr:88px;--ab:88px;
  --c-dia:#12150F;--c-crema:#161A16;--c-tostado:#1A1F1A;--c-pie:#1A1F1A}
:root[data-tema="claro"] .dv{--c-dia:#ADB18F;--c-crema:#F5EFE3;--c-tostado:#E8DFCC}
.dv[data-a="dia"]{--a:var(--c-dia)}
.dv[data-a="crema"]{--a:var(--c-crema)}
.dv[data-a="tostado"]{--a:var(--c-tostado)}
.dv[data-b="crema"]{--b:var(--c-crema)}
.dv[data-b="tostado"]{--b:var(--c-tostado)}
.dv[data-b="pie"]{--b:var(--c-pie)}

/* ── Capas: ocupan la franja del corte (de --arr arriba a --ab abajo; el corte queda a --arr del borde de arriba) ── */
.dv > *{position:absolute;left:0;right:0;top:calc(var(--arr) * -1);height:calc(var(--arr) + var(--ab));z-index:1;overflow:clip}
.dv > .dv-ojo{visibility:hidden;z-index:auto}
/* La cordillera y, debajo, un velo del tono de la sección siguiente que baja 240 px (170 en el celu) y se
   desvanece: tapa el borde donde se recortan sus halos (en oscuro) y el manchón oliva del pie, que así
   aparecen de a poco. Va bajo el texto */
.dv > .dv-capa{height:calc(var(--arr) + 240px)}
.dv-velo{display:none;position:absolute;left:0;right:0;top:var(--arr);height:240px;background:var(--b);
  -webkit-mask:linear-gradient(#000 5%,rgba(0,0,0,.86) 25%,rgba(0,0,0,.52) 50%,rgba(0,0,0,.2) 75%,transparent);
  mask:linear-gradient(#000 5%,rgba(0,0,0,.86) 25%,rgba(0,0,0,.52) 50%,rgba(0,0,0,.2) 75%,transparent)}
:root:not([data-tema="claro"]) .dv-velo,.dv[data-b="pie"] .dv-velo{display:block}

/* ── Los tres cordones. Abajo se recortan en el corte; entran al aparecer ── */
.dv-co{position:absolute;left:0;top:0;width:100%;height:calc(var(--arr) + 1px);clip-path:inset(-30px -60px 0 -60px);
  opacity:0;transform:translateY(calc(var(--arr) * .24));transition:transform 1.3s var(--ease),opacity .9s var(--ease)}
.dv-vis .dv-co{opacity:1;transform:none}
.dv-co svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
/* El lejano y el del medio van en capas que el script hunde y levanta: --sube va de 0 (el corte recién
   asoma abajo) a 1 (el corte pasó el 40 % de la pantalla), como cuando uno sube y ve más cordillera */
.dv-pa{position:absolute;inset:0;will-change:transform;transform:translate3d(0,calc((1 - var(--sube,1)) * var(--hunde)),0)}
.dv-pa1{--hunde:calc(var(--arr) * .5)}
.dv-pa2{--hunde:calc(var(--arr) * .26)}
/* Además derivan despacio, como los cordones del hero (±26 px, cada corte a su ritmo): sobran 40 px por
   lado, así la deriva nunca muestra la punta. Se frenan fuera de pantalla */
.dv-co-fondo{position:absolute;top:0;bottom:0;left:-40px;right:-40px;will-change:transform;animation:dv-deriva var(--dur,32s) ease-in-out var(--ret,0s) infinite alternate;animation-play-state:paused}
.dv-co-fondo.rev{animation-direction:alternate-reverse}
.dv-corre .dv-co-fondo{animation-play-state:running}
@keyframes dv-deriva{from{transform:translate3d(-26px,0,0)}to{transform:translate3d(26px,0,0)}}
/* Colores. En claro, el lejano apenas teñido de salvia y el del medio de olivo, como las capas del hero;
   el de adelante es la sección siguiente. En oscuro los tres salen del tono de abajo, con filos de luz */
.dv-co .lejos{fill:color-mix(in srgb,var(--a),#8A9A6B 16%)}
.dv-co .medio{fill:color-mix(in srgb,color-mix(in srgb,var(--a),var(--b) 50%),#6B7A4B 22%)}
.dv-co .cerca{fill:var(--b)}
.dv-co .filo{fill:none;stroke:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
:root:not([data-tema="claro"]) .dv-co .lejos{fill:color-mix(in srgb,var(--b),#B8C29A 9%)}
:root:not([data-tema="claro"]) .dv-co .medio{fill:color-mix(in srgb,var(--b),#B8C29A 4.5%)}
:root:not([data-tema="claro"]) .dv-co .filo{stroke:rgba(245,239,227,.13)}
:root:not([data-tema="claro"]) .dv-co .filo.fl{stroke:rgba(184,194,154,.17)}
:root:not([data-tema="claro"]) .dv-co .filo.fm{stroke:rgba(184,194,154,.15)}
/* El punto terracota, en la cima más alta del cordón lejano: deriva con él */
.dv-co-cima{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#C45E3A;box-shadow:0 0 0 3px rgba(196,94,58,.2)}

/* ── Con la cordillera, el pie pierde el filete terracota de arriba (cortaría la cordillera tinta) y el
   paisaje de los cierres queda por encima del velo, para no apagarle el sol (los sellos van con z-index 2,
   más arriba, y el texto viene después) ── */
footer.dv-pie{border-top-color:transparent}
.f9s:not(.f-dia) > .hero-mountains{z-index:1}

@media(max-width:768px){.dv > .dv-capa{height:calc(var(--arr) + 170px)}.dv-velo{height:170px}}
@media(prefers-reduced-motion:reduce){.dv-co-fondo{animation:none}.dv-pa{transform:none}.dv-co{transition:none}}
@media print{.dv{display:none}}
/* ═══ fin divisiones ═══ */