/* Conecta Comunidad · v30 · v31 · Qué hacemos · «Cómo crece un territorio» (capítulo 5)
   Prefijos: .tz- (composición), .t3- (diorama y controles).
   v31 (QH-B): el diorama y los seis momentos son una sola pieza. Bajo el dibujo, la línea de tiempo a escala
   (semanas, meses, años, una generación); cada momento enciende un estado del diorama. Los tres deslizadores
   pasan a una franja compacta. En celular, el diorama ocupa todo el ancho. */
.tz{ --tz-alerta:#A9480F; --tz-m:#0F4C5C; position:relative; isolation:isolate; overflow:clip;
  background:radial-gradient(52% 60% at 34% 40%, rgba(127,176,105,.13), transparent 70%),
             radial-gradient(36% 44% at 90% 20%, rgba(176,138,87,.10), transparent 70%), var(--papel) }
.tz-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }
.tz-k{ margin:0; font-family:var(--sans); font-size:.9rem; font-weight:650; color:var(--petroleo) }

/* ---------------------------------------------------------------- cabecera */
.tz-cab{ display:grid; gap:var(--e-md) clamp(2rem,5vw,5rem); align-items:end; margin-bottom:clamp(1rem,2.5vw,2rem) }
@media (min-width:62rem){ .tz-cab{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) } }
.tz-cab .antetitulo{ color:var(--petroleo); margin:0 0 var(--e-sm) }
.tz-t{ font-family:var(--sans); font-size:clamp(2.1rem,1.2rem + 3.2vw,4.2rem); font-weight:650; line-height:1.02; letter-spacing:-.033em; color:var(--tinta); max-width:17ch; text-wrap:balance }
.tz-lede{ font-family:var(--lee); font-size:clamp(1.06rem,.98rem + .4vw,1.26rem); line-height:1.6; color:var(--tinta-2); max-width:42ch; margin:0 }

/* ---------------------------------------------------------------- escena
   escritorio:  diorama | lectura          celular: diorama (a todo el ancho)
                diorama | franja de mandos           lectura breve
                línea de tiempo (ancho)              línea de tiempo
                                                     franja de mandos  */
.tz-escena{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"d" "e" "t" "m"; gap:1rem; align-items:start }
.tz-dio{ grid-area:d } .tz-est{ grid-area:e } .tz-tiempo{ grid-area:t } .tz-mandos{ grid-area:m }
@media (min-width:62rem){
  .tz-escena{ grid-template-columns:minmax(0,1.7fr) minmax(19rem,1fr); grid-template-areas:"d e" "d m" "t t"; gap:0 clamp(1.5rem,3vw,3rem) }
  .tz-est{ align-self:end; padding-bottom:1.25rem }
  .tz-mandos{ align-self:start }
  .tz-tiempo{ margin-top:clamp(.5rem,1.5vw,1.25rem) }
}
.tz-dio{ margin:0; min-width:0; position:relative }
.t3-svg{ display:block; height:auto; overflow:visible; width:calc(100% + 2 * var(--canal, 1rem)); margin:0 calc(-1 * var(--canal, 1rem)); max-width:none }
@media (min-width:62rem){ .t3-svg{ width:calc(100% + 4rem); margin:-1.5rem -1rem -1rem -3rem } }

/* ---------------------------------------------------------------- lectura: el momento y lo que queda */
.tz-est{ font-family:var(--sans); min-width:0 }
.tz-est p{ margin:0 }
.tz-est__k{ font-size:.86rem; font-weight:650; color:var(--petroleo); font-variant-numeric:tabular-nums }
.tz-est__t{ margin-top:.2rem !important; font-size:clamp(1.6rem,1.1rem + 1.6vw,2.6rem); font-weight:650; letter-spacing:-.028em; line-height:1.05; color:var(--tinta) }
.tz-est__d{ margin-top:.5rem !important; font-family:var(--lee); font-size:clamp(1rem,.96rem + .2vw,1.1rem); line-height:1.55; color:var(--tinta-2); max-width:44ch }
.tz-est__q{ margin-top:.6rem !important; font-size:.94rem; line-height:1.45; color:var(--tinta); max-width:44ch }
.tz-est__q[hidden]{ display:none }
.tz-est__q b{ color:var(--petroleo); font-weight:650 }
.tz-cuenta{ margin-top:.6rem !important; font-size:.86rem; font-weight:600; color:var(--mudo); font-variant-numeric:tabular-nums }
.tz--cero .tz-est__t,.tz--cero .tz-cuenta,.tz--contra .tz-est__t{ color:var(--tz-alerta) }

/* ---------------------------------------------------------------- la línea de tiempo a escala (#ciclo) */
.tz-tiempo{ min-width:0; scroll-margin-top:calc(var(--alto-nav, 4.25rem) + 4rem) }
.tz-tiempo__cab{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; margin-bottom:.8rem }
.tz-regla{ position:relative; --cur:0% }
.tz-moms{ list-style:none; margin:0; padding:0; position:relative; height:4.1rem }
.tz-m{ position:absolute; top:0; bottom:0; left:var(--a); width:calc(var(--b) - var(--a)); padding-right:3px }
.tz-m__b,.tz-m > .tz-m__n,.tz-m > .tz-m__t{ font:inherit }
.tz-m__b{ all:unset; box-sizing:border-box; display:flex; align-items:center; gap:.5rem; width:100%; height:100%; padding:.4rem .6rem; border-radius:.6rem; cursor:pointer;
  background:rgba(15,76,92,.09); box-shadow:inset 0 0 0 1px rgba(15,76,92,.16); color:var(--tinta); font-family:var(--sans); transition:background .25s ease, color .25s ease, box-shadow .25s ease }
.tz-m__b:hover{ background:rgba(15,76,92,.17) }
.tz-m__b:focus-visible{ outline:3px solid var(--petroleo); outline-offset:2px }
.tz-m.es-hecho .tz-m__b{ background:rgba(15,76,92,.24) }
.tz-m.es-on .tz-m__b{ background:var(--tz-m); color:var(--papel); box-shadow:0 10px 22px -12px rgba(15,76,92,.7) }
.tz-m__n{ flex:0 0 auto; display:grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--papel); color:var(--tz-m); font:700 .82rem/1 var(--sans); box-shadow:0 0 0 1px rgba(15,76,92,.25) }
.tz-m__t{ display:flex; flex-direction:column; min-width:0; line-height:1.15 }
.tz-m__t b{ font-weight:650; font-size:.92rem; white-space:nowrap }
.tz-m__t small{ font-size:.76rem; opacity:.78; white-space:nowrap }
/* sin JS, la regla se ve igual pero sin botones */
.tz-m > .tz-m__n,.tz-m > .tz-m__t{ position:relative }
.tz-m:not(:has(.tz-m__b)){ display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem; border-radius:.6rem; background:rgba(15,76,92,.09); box-shadow:inset 0 0 0 1px rgba(15,76,92,.16); font-family:var(--sans) }
/* el eje: zonas y marcas */
.tz-eje{ position:relative; margin-top:.45rem; font-family:var(--sans) }
.tz-zonas{ position:relative; height:1.5rem; border-top:2px solid rgba(14,23,38,.55) }
.tz-z{ position:absolute; top:0; left:var(--a); width:calc(var(--b) - var(--a)); padding:.3rem 0 0 .4rem; font-size:.78rem; font-weight:650; color:var(--tinta-2); white-space:nowrap;
  border-left:1px solid rgba(14,23,38,.35) }
.tz-z:nth-child(even){ background:linear-gradient(rgba(14,23,38,.05), transparent) }
.tz-marcas{ position:relative; height:1.1rem }
.tz-mc{ position:absolute; left:var(--a); transform:translateX(-50%); font-size:.72rem; color:var(--mudo); white-space:nowrap; font-variant-numeric:tabular-nums }
.tz-mc:first-child{ transform:none }
.tz-mc:last-child{ transform:translateX(-100%) }
/* cursor: hasta dónde llegó el encargo */
.tz-regla::after{ content:""; position:absolute; left:0; top:4.1rem; margin-top:.45rem; height:4px; width:var(--cur); transform:translateY(-3px); background:var(--tz-m); border-radius:2px; transition:width .9s var(--salida, ease-out) }
.tz-regla--libre::after{ width:0 }
.tz-lista{ margin:1rem 0 0; padding-left:1.3rem; display:grid; gap:.6rem; font-family:var(--lee); font-size:.98rem; line-height:1.5; color:var(--tinta-2) }
.tz-lista b{ font-family:var(--sans); color:var(--tinta) }
.tz-lista__d,.tz-lista__q{ font-family:var(--sans); font-size:.86rem; color:var(--mudo) }
.tz--js .tz-lista{ display:none }

/* ---------------------------------------------------------------- la franja de mandos (compacta) */
.tz-mandos[hidden]{ display:none }
.tz-mandos{ min-width:0; padding:.9rem 1rem 1rem; border-radius:1rem; background:rgba(255,255,255,.6); box-shadow:0 0 0 1px rgba(14,23,38,.08), 0 10px 26px -18px rgba(14,23,38,.35) }
.t3-ctrl{ display:grid; gap:.15rem; margin:.4rem 0 .6rem }
.t3-f{ display:grid; grid-template-columns:6.2rem minmax(5rem,1fr) 2.6rem; align-items:center; gap:0 .8rem; font-family:var(--sans) }
.t3-f label{ font-weight:700; font-size:.98rem; color:var(--ct); line-height:1.15 }
.t3-f label small{ display:none }
.t3-f__v{ display:flex; align-items:baseline; justify-content:flex-end; gap:.1rem; font-variant-numeric:tabular-nums }
.t3-f__v output{ font-weight:700; font-size:1.2rem; line-height:1; color:var(--tinta) }
.t3-f__v small{ font-size:.78rem; color:var(--mudo) }
.t3-f.es-cero .t3-f__v output{ color:var(--tz-alerta) }
.t3-f input[type="range"]{ -webkit-appearance:none; appearance:none; display:block; width:100%; height:var(--toque, 44px); background:transparent; margin:0; cursor:pointer }
.t3-f input[type="range"]::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:linear-gradient(to right, var(--c) var(--p), rgba(14,23,38,.12) var(--p)) }
.t3-f input[type="range"]::-moz-range-track{ height:6px; border-radius:3px; background:rgba(14,23,38,.12) }
.t3-f input[type="range"]::-moz-range-progress{ height:6px; border-radius:3px; background:var(--c) }
.t3-f input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border-radius:50%; background:var(--blanco); border:3px solid var(--c); box-shadow:0 2px 6px rgba(14,23,38,.28); transition:transform .15s ease }
.t3-f input[type="range"]::-moz-range-thumb{ width:17px; height:17px; border-radius:50%; background:var(--blanco); border:3px solid var(--c); box-shadow:0 2px 6px rgba(14,23,38,.28) }
.t3-f input[type="range"]:active::-webkit-slider-thumb{ transform:scale(1.12) }
.t3-f input[type="range"]:focus{ outline:none }
.t3-f input[type="range"]:focus-visible{ outline:3px solid var(--petroleo); outline-offset:2px; border-radius:6px }
@media (min-width:62rem){
  .t3-f label small{ display:block; font-weight:500; font-size:.74rem; color:var(--mudo); margin-top:.1rem }
  .t3-f{ grid-template-columns:minmax(0,10rem) minmax(5rem,1fr) 2.6rem; padding:.25rem 0 }
}

.tz-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:var(--toque); padding:.55rem 1.1rem; border-radius:999px; border:1px solid rgba(14,23,38,.28);
  background:transparent; color:var(--tinta); font:650 .92rem/1.2 var(--sans); cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease }
.tz-btn[hidden]{ display:none }
.tz-btn:hover{ border-color:var(--tinta) }
.tz-btn:focus-visible{ outline:3px solid var(--petroleo); outline-offset:2px }
.tz-btn--play{ background:var(--tinta); border-color:var(--tinta); color:var(--papel); min-width:10.5rem }
.tz-btn--play:hover{ background:var(--petroleo); border-color:var(--petroleo) }
.tz-btn__ic svg{ width:1rem; height:1rem; display:block }
.tz-btn__ic--pausa{ display:none }
.tz--corre .tz-btn__ic--pausa{ display:block } .tz--corre .tz-btn__ic--play{ display:none }
.tz-btn--contra{ min-height:2.5rem; padding:.4rem 1rem; font-size:.86rem }
.tz-btn--contra[aria-pressed="true"]{ background:var(--tz-alerta); border-color:var(--tz-alerta); color:var(--papel) }

/* ---------------------------------------------------------------- nota, cita y puente */
.tz-nota{ margin:clamp(1rem,2vw,1.5rem) 0 0; font-family:var(--sans); font-size:.84rem; line-height:1.5; color:var(--mudo); max-width:70ch }
.tz-cita{ margin:clamp(2.5rem,5vw,4rem) auto 0; max-width:46rem; text-align:center }
.tz-cita p{ margin:0; font-family:var(--lee); font-size:clamp(1.25rem,1rem + 1vw,1.8rem); line-height:1.4; color:var(--tinta); text-wrap:balance }
.tz-puente{ display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:.4rem 1.1rem; margin:clamp(2rem,4vw,3rem) auto 0; text-align:center }
@media (max-width:47.99rem){ .tz-puente{ flex-direction:column; align-items:center; gap:.2rem } }

/* ---------------------------------------------------------------- celular y tableta */
@media (max-width:61.99rem){
  .t3-svg{ margin-bottom:-9% }
  .tz-est__t{ font-size:1.5rem }
  .tz-est__d{ font-size:.98rem }
  .tz-mandos{ padding:.6rem .8rem .7rem }
  .tz-mandos .tz-k{ font-size:.84rem }
  .t3-ctrl{ margin:.2rem 0 .4rem; gap:0 }
}
/* en el teléfono, los momentos muestran solo su número; el nombre va en la lectura */
@media (max-width:47.99rem){
  .tz-moms{ height:2.9rem }
  .tz-regla::after{ top:2.9rem }
  .tz-m{ padding-right:2px }
  .tz-m__b,.tz-m:not(:has(.tz-m__b)){ justify-content:center; padding:0 }
  .tz-m__t{ display:none !important }
  .tz-z{ font-size:.7rem; padding-left:.25rem }
  .tz-z:last-child{ text-align:right; padding:.3rem 0 0; border-left:0 }
  .tz-z:last-child{ position:absolute; left:auto; right:0; width:auto }
  .tz-mc{ font-size:.66rem }
  .tz-mc:nth-child(4){ display:none }
  .t3-f{ grid-template-columns:5.6rem minmax(0,1fr) 2.2rem; gap:0 .5rem }
  .t3-f label{ font-size:.92rem }
}
@media (min-width:48rem) and (max-width:79.99rem){
  .tz-m__t small{ display:none }
}

/* ---------- animación del diorama */
.t3-svg [data-k]{ transform-box:fill-box; transform-origin:50% 100% }
.t3-svg [data-t="capa"]{ transform-origin:50% 0 }
.t3-n-brota{ animation:t3-brota .7s var(--salida, ease-out) both; animation-delay:var(--d, 0ms) }
.t3-n-levanta{ animation:t3-levanta .8s var(--salida, ease-out) both; animation-delay:var(--d, 0ms) }
.t3-n-capa{ animation:t3-capa .7s var(--salida, ease-out) both; animation-delay:var(--d, 0ms) }
.t3-n-aparece{ animation:t3-aparece .6s ease both; animation-delay:var(--d, 0ms) }
.t3-n-traza path{ stroke-dasharray:1; stroke-dashoffset:1; animation:t3-traza 1.1s var(--salida, ease-out) forwards; animation-delay:var(--d, 0ms) }
.t3-crece{ animation:t3-crece .7s var(--salida, ease-out) both }
@keyframes t3-brota{ from{ opacity:0; transform:scale(.1) } 55%{ opacity:1; transform:scale(1.06) } to{ opacity:1; transform:none } }
@keyframes t3-levanta{ from{ opacity:0; transform:scaleY(.04) } 30%{ opacity:1 } 72%{ transform:scaleY(1.03) } to{ opacity:1; transform:none } }
@keyframes t3-capa{ from{ opacity:0; transform:scaleY(0) } to{ opacity:1; transform:none } }
@keyframes t3-aparece{ from{ opacity:0 } to{ opacity:1 } }
@keyframes t3-traza{ to{ stroke-dashoffset:0 } }
@keyframes t3-crece{ from{ transform:scale(var(--de, 1)) } to{ transform:none } }
.t3-fragil{ filter:saturate(.25) brightness(.97); opacity:.72 }
.t3-flamea{ transform-box:fill-box; transform-origin:0 50%; animation:t3-flamea 3.2s ease-in-out infinite alternate }
@keyframes t3-flamea{ from{ transform:skewY(-2deg) scaleX(.97) } to{ transform:skewY(2deg) scaleX(1) } }
.t3-fragil .t3-flamea{ animation:none; transform:rotate(16deg) scaleX(.9) }
.t3-humo{ animation:t3-humo 4s ease-in-out infinite alternate }
@keyframes t3-humo{ from{ opacity:.35; transform:translateY(1px) } to{ opacity:.75; transform:translateY(-2px) } }
@media (prefers-reduced-motion:reduce){
  .t3-svg *, .t3-svg *::before{ animation:none !important }
  .t3-n-traza path{ stroke-dashoffset:0 }
  .tz-btn,.tz-m__b,.tz-regla::after,.t3-f input[type="range"]::-webkit-slider-thumb{ transition:none }
}
.tz.banda{ padding-bottom:clamp(2.4rem,5vw,3.6rem) }

/* ================================================================ v32 · el diorama, más vivo y con transiciones suaves
   Pedido del dueño: «que se vea más bonita todavía». Lo que cambia de una etapa a otra se funde (el pasto, los
   techos, el suelo) y lo que se va se desvanece en su lugar. Vida quieta y lenta: el agua corre, las nubes y
   las aves se mueven apenas. Todo se detiene con movimiento reducido y cuando el dibujo no está a la vista. */
.t3-sale{ pointer-events:none; animation:t3-sale .75s ease both }
.t3-sale--va{ transform-box:fill-box; transform-origin:50% 100%; animation:t3-va .6s ease both }
@keyframes t3-sale{ from{ opacity:1 } to{ opacity:0 } }
@keyframes t3-va{ from{ opacity:1; transform:none } to{ opacity:0; transform:scale(.92) } }
.t3-brillo{ animation:t3-agua 3.2s linear infinite }
@keyframes t3-agua{ from{ stroke-dashoffset:0 } to{ stroke-dashoffset:-27 } }
.t3-nube{ animation:t3-nube 26s ease-in-out infinite alternate }
.t3-nube--1{ animation-duration:32s; animation-direction:alternate-reverse }
.t3-nube--2{ animation-duration:22s }
@keyframes t3-nube{ from{ transform:translateX(-6px) } to{ transform:translateX(8px) } }
.t3-aves{ animation:t3-aves 9s ease-in-out infinite alternate }
@keyframes t3-aves{ from{ transform:translate(0,0) } to{ transform:translate(-14px,-5px) } }
.tz--fuera .t3-svg *{ animation-play-state:paused !important }
@media (prefers-reduced-motion:reduce){
  .t3-sale,.t3-sale--va{ display:none }
}