/* Sedimento · Moxen — los estilos del efecto y de la demostración. */
:root {
  --se-fondo: #0a0a0a;
  --se-texto: #f4f4f4;
  --se-suave: rgba(255, 255, 255, .5);
  --se-linea: rgba(255, 255, 255, .16);
  --se-cabeza: 100px;           /* lo que queda arriba para ver los estratos */
  --se-asoma: 64px;             /* lo que asoma la lámina siguiente por abajo */
  --se-radio: 30px;
  /* las capas: más hondo, más caliente, más claro */
  --se-l1: #181818; --se-t1: #f4f4f4;
  --se-l2: #2e2e2e; --se-t2: #f4f4f4;
  --se-l3: #9c9c9c; --se-t3: #0a0a0a;
  --se-l4: #ededed; --se-t4: #0a0a0a;
}
:root[data-tema="claro"] {
  --se-fondo: #eeeeee;
  --se-texto: #0a0a0a;
  --se-suave: rgba(0, 0, 0, .5);
  --se-linea: rgba(0, 0, 0, .16);
  /* sobre fondo claro, al revés: más hondo, más oscuro */
  --se-l1: #ffffff; --se-t1: #0a0a0a;
  --se-l2: #d2d2d2; --se-t2: #0a0a0a;
  --se-l3: #5c5c5c; --se-t3: #f4f4f4;
  --se-l4: #121212; --se-t4: #f4f4f4;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--se-fondo); color: var(--se-texto); overflow: hidden; }
body { font-family: "General Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.se-defs { position: absolute; width: 0; height: 0; }

/* ── el efecto ─────────────────────────────────────────────────────── */
/* Las láminas se apilan en el mismo sitio. sedimento.js coloca cada una
   según su distancia a la actual: las que vienen esperan abajo (la
   siguiente asoma), la actual ocupa la pila y las que ya pasaron se
   hunden un poco y se encogen desde arriba, así su borde superior queda
   a la vista como un estrato. Solo transform y opacity. */
[data-sedimento] { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.se-pila { position: absolute; left: 0; right: 0; top: var(--se-cabeza); bottom: 0; }
.se-lamina {
  position: absolute; inset: 0; border-radius: var(--se-radio) var(--se-radio) 0 0; overflow: hidden;
  transform-origin: 50% 0; will-change: transform; cursor: grab;
  background: var(--se-l); color: var(--se-t);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
}
[data-sedimento].se-arrastra .se-lamina { cursor: grabbing; }
/* la sombra que oscurece a las que quedan detrás (--se-sombra, de 0 a 1) */
.se-lamina::after {
  content: ""; position: absolute; inset: 0; background: #000; pointer-events: none;
  opacity: calc(var(--se-sombra, 0) * .55);
}
.se-lamina[data-capa="1"] { --se-l: var(--se-l1); --se-t: var(--se-t1); --se-f1: currentColor; --se-f2: var(--se-l); }
.se-lamina[data-capa="2"] { --se-l: var(--se-l2); --se-t: var(--se-t2); --se-f2: currentColor; --se-f3: var(--se-l); }
.se-lamina[data-capa="3"] { --se-l: var(--se-l3); --se-t: var(--se-t3); --se-f3: currentColor; --se-f4: var(--se-l); }
.se-lamina[data-capa="4"] { --se-l: var(--se-l4); --se-t: var(--se-t4); --se-f4: currentColor; }

/* la textura de cada capa, muy tenue */
.se-lamina::before { content: ""; position: absolute; inset: 0; opacity: .1; pointer-events: none; }
.se-lamina[data-capa="1"]::before {
  background: repeating-linear-gradient(176deg, currentColor 0 1px, transparent 1px 23px), repeating-linear-gradient(181deg, currentColor 0 1px, transparent 1px 37px);
}
.se-lamina[data-capa="2"]::before {
  background: radial-gradient(40% 60% at 20% 80%, currentColor, transparent), radial-gradient(35% 50% at 75% 30%, currentColor, transparent);
  opacity: .07;
}
.se-lamina[data-capa="3"]::before { background: repeating-linear-gradient(118deg, currentColor 0 1px, transparent 1px 14px); opacity: .09; }
.se-lamina[data-capa="4"]::before { background: radial-gradient(60% 90% at 85% 60%, rgba(255, 255, 255, .9), transparent); opacity: .5; }

/* ── la demostración ───────────────────────────────────────────────── */
.se-escena { height: 100%; overflow: hidden; }
.se-cabeza {
  position: absolute; left: 0; right: 0; top: 0; height: var(--se-cabeza); display: flex; justify-content: space-between; align-items: flex-start;
  padding: clamp(1rem, 3vh, 1.6rem) clamp(1.25rem, 5vw, 4rem) 0;
}
.se-marca { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--se-suave); }
.se-cuenta { font-size: .85rem; color: var(--se-suave); font-variant-numeric: tabular-nums; }
.se-cuenta b { font-weight: 500; color: var(--se-texto); }

.se-borde {
  position: relative; display: flex; justify-content: space-between; padding: 1.15rem clamp(1.25rem, 5vw, 4rem) 0;
  font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .55;
}
.se-cuerpo {
  position: relative; height: calc(100% - 3rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4vw;
  padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(4.5rem, 12vh, 6rem);
}
.se-hondo { margin: 0; font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 500; font-variant-numeric: tabular-nums; opacity: .6; }
.se-hondo small { font-size: inherit; opacity: .7; }
.se-nombre { margin: .4rem 0 0; font-size: clamp(2.8rem, 8vw, 7rem); font-weight: 500; letter-spacing: -.055em; line-height: .92; }
.se-nota { margin: 1.2rem 0 0; max-width: 36ch; font-size: clamp(.95rem, 1.4vw, 1.15rem); line-height: 1.45; opacity: .62; }
.se-datos { margin: 1.6rem 0 0; display: flex; gap: 2.4rem; }
.se-datos div { border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); padding-top: .7rem; }
.se-datos dt { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .5; }
.se-datos dd { margin: .3rem 0 0; font-size: 1.05rem; font-weight: 500; }
.se-mapa { width: min(30vw, 46vh); aspect-ratio: 1; overflow: visible; }
.se-r { stroke: currentColor; stroke-opacity: .4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.se-r1 { fill: var(--se-f1, transparent); }
.se-r2 { fill: var(--se-f2, transparent); }
.se-r3 { fill: var(--se-f3, transparent); }
.se-r4 { fill: var(--se-f4, transparent); }

.se-mandos { position: absolute; z-index: 10; right: clamp(1rem, 5vw, 4rem); bottom: calc(var(--se-asoma) + 1.25rem); display: flex; gap: .5rem; }
.se-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-width: 46px; height: 46px; padding: 0 1.15rem; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--se-mando, var(--se-texto)) 30%, transparent); border-radius: 99px; background: none;
  color: var(--se-mando, var(--se-texto)); font: inherit; font-size: .9rem; font-weight: 500; transition: color .4s, border-color .4s, opacity .3s;
}
.se-boton[disabled] { opacity: .3; cursor: default; }
.se-boton:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (max-width: 700px) {
  :root { --se-cabeza: 84px; --se-asoma: 52px; --se-radio: 22px; }
  .se-cuerpo { grid-template-columns: 1fr; align-content: center; gap: 1.2rem; padding-bottom: 7rem; }
  .se-mapa { order: -1; width: 34vw; }
  .se-borde span + span { display: none; }
  .se-datos { gap: 1.4rem; }
  .se-mandos { bottom: calc(var(--se-asoma) + .75rem); }
}