/* Conecta Comunidad · v23 · «Un territorio se construye en tres dimensiones» (prefijo t3)
   Diorama isométrico + tres controles + guía por niveles + cadena de seis eslabones. */
.t3{ --t3-r:14px; --t3-cs:#B08A57; --t3-ip:#5FB3AC; --t3-t:#7FB069; --t3-alerta:#A9480F }
.t3-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ---------- laboratorio: dibujo + panel de controles */
.t3-lab{ display:grid; grid-template-columns:minmax(0,1.38fr) minmax(0,1fr); gap:clamp(1.25rem,3vw,3rem); align-items:start; margin-top:var(--e-xl) }
.t3-fig{ margin:0; background:var(--papel); border-radius:var(--t3-r); box-shadow:0 1px 0 rgba(14,23,38,.04), 0 18px 40px -28px rgba(14,23,38,.35); padding:clamp(.75rem,2vw,1.5rem) clamp(.75rem,2vw,1.5rem) clamp(1rem,2vw,1.4rem); position:sticky; top:calc(var(--alto-nav, 4.25rem) + 1rem) }
.t3-fig__lienzo{ position:relative }
.t3-svg{ display:block; width:100%; height:auto; overflow:visible }

/* resultado: la cifra manda, la cuenta la explica, la barra la ubica */
.t3-res{ display:grid; grid-template-columns:1fr auto; align-items:end; column-gap:1rem; row-gap:.6rem; padding-top:clamp(.6rem,1.5vw,1rem); border-top:1px solid var(--filete); font-family:var(--sans) }
.t3-res__n{ margin:0; display:flex; align-items:baseline; gap:.5rem; color:var(--tinta) }
.t3-res__k{ font-size:.95rem; font-weight:600; color:var(--tinta-2) }
.t3-res__n b{ font-size:clamp(2.4rem,1.7rem + 1.8vw,3.25rem); font-weight:650; letter-spacing:-.035em; line-height:.95; font-variant-numeric:tabular-nums }
.t3-res__de{ color:var(--mudo); font-size:.95rem }
.t3-res__cuenta{ margin:0 0 .35rem; display:flex; align-items:center; gap:.3rem; font-size:.95rem; font-weight:600; color:var(--mudo); font-variant-numeric:tabular-nums }
.t3-res__x{ display:inline-grid; place-items:center; min-width:1.75rem; height:1.75rem; border-radius:6px; background:color-mix(in srgb, var(--c) 28%, var(--papel)); color:var(--tinta); font-weight:700 }
.t3-res__barra{ grid-column:1 / -1; position:relative; height:8px; border-radius:4px; background:rgba(14,23,38,.09); overflow:hidden }
.t3-res__barra::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(to right, transparent 0 calc(20% - 1px), rgba(244,242,238,.9) calc(20% - 1px) 20%) }
.t3-res__barra i{ display:block; height:100%; background:linear-gradient(to right, var(--t3-cs), var(--t3-ip) 55%, var(--t3-t)); transform-origin:left; transform:scaleX(.19); transition:transform .6s var(--salida, ease) }
.t3-res__msg{ grid-column:1 / -1; margin:0; font-weight:600; color:var(--tinta); line-height:1.4; min-height:2.8em; text-wrap:pretty }
.t3-res__msg.es-cero{ color:var(--t3-alerta) }

/* panel: fórmula, momentos, tres controles y nota */
.t3-ctrl{ font-family:var(--sans); display:grid; gap:var(--e-md) }
.t3-ctrl__cab{ display:grid; gap:.3rem }
.t3-eq{ font-size:clamp(1.15rem,1rem + .6vw,1.5rem); font-weight:600; color:var(--tinta-2); line-height:1.4; margin:0; text-wrap:balance }
.t3-eq b{ color:var(--tinta) }
.t3-eq i{ font-style:normal; color:var(--tinta); box-shadow:inset 0 -.36em 0 color-mix(in srgb, var(--c) 42%, transparent) }
.t3-eq__k{ margin:0; font-size:.9rem; color:var(--mudo) }

.t3-esc{ margin:0 }
.t3-esc__k{ margin:0 0 .5rem; font-size:.9rem; font-weight:600; color:var(--tinta-2) }
.t3-esc__l{ list-style:none; margin:0; padding:3px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; background:rgba(14,23,38,.06); border-radius:12px }
.t3-esc__b{ width:100%; height:100%; min-height:var(--toque, 44px); padding:.5rem .7rem; border-radius:9px; border:0; background:transparent; color:var(--tinta); font:inherit; cursor:pointer; display:grid; align-content:center; gap:.1rem; text-align:left; line-height:1.2; transition:background-color .2s, color .2s, box-shadow .2s }
.t3-esc__b b{ font-weight:650; font-size:.92rem }
.t3-esc__b small{ font-size:.76rem; color:var(--mudo); font-variant-numeric:tabular-nums }
.t3-esc__b:hover{ background:rgba(255,255,255,.6) }
.t3-esc__b[aria-pressed="true"]{ background:var(--petroleo); color:var(--papel); box-shadow:0 2px 6px -2px rgba(14,23,38,.4) }
.t3-esc__b[aria-pressed="true"] small{ color:#C5D3D5 }
.t3-esc__b:focus-visible{ outline:3px solid var(--petroleo); outline-offset:2px }

.t3-fs{ background:var(--papel); border-radius:var(--t3-r); padding:.25rem clamp(1rem,1.8vw,1.4rem) }
.t3-f{ padding:.95rem 0 .9rem }
.t3-f + .t3-f{ border-top:1px solid var(--filete) }
.t3-f__cab{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.t3-f__cab label{ display:flex; align-items:center; gap:.55rem; font-weight:650; font-size:1.06rem; color:var(--tinta) }
.t3-f__cab label i{ width:.85rem; height:.85rem; border-radius:3px; background:var(--c) }
.t3-f__v{ display:flex; align-items:baseline; gap:.3rem; font-variant-numeric:tabular-nums }
.t3-f__v output{ font-weight:650; font-size:1.4rem; line-height:1; color:var(--tinta) }
.t3-f__v small{ font-size:.82rem; color:var(--mudo) }
.t3-f__que{ margin:.15rem 0 0; font-size:.88rem; color:var(--mudo); line-height:1.4 }
.t3-f__nivel{ margin:.2rem 0 0; font-size:.9rem; line-height:1.4; color:var(--tinta-2); min-height:2.8em }
.t3-f__nivel b{ color:var(--tinta); font-weight:650 }
.t3-f__marcas{ display:flex; justify-content:space-between; padding:0 calc(13px - .5ch); margin-top:-.45rem; font-size:.72rem; color:var(--mudo); font-variant-numeric:tabular-nums }
.t3-f__marcas span{ width:1ch; text-align:center }

/* deslizador propio, 44 px de alto */
.t3 input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:var(--toque, 44px); background:transparent; margin:0; cursor:pointer; --p:60% }
.t3 input[type="range"]::-webkit-slider-runnable-track{ height:8px; border-radius:4px; background:linear-gradient(to right, var(--c) var(--p), rgba(14,23,38,.12) var(--p)) }
.t3 input[type="range"]::-moz-range-track{ height:8px; border-radius:4px; background:rgba(14,23,38,.12) }
.t3 input[type="range"]::-moz-range-progress{ height:8px; border-radius:4px; background:var(--c) }
.t3 input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; margin-top:-9px; border-radius:50%; background:var(--blanco); border:2px solid var(--tinta); box-shadow:0 1px 3px rgba(14,23,38,.25); transition:transform .15s }
.t3 input[type="range"]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--blanco); border:2px solid var(--tinta); box-shadow:0 1px 3px rgba(14,23,38,.25) }
.t3 input[type="range"]:active::-webkit-slider-thumb{ transform:scale(1.12) }
.t3 input[type="range"]:focus{ outline:none }
.t3 input[type="range"]:focus-visible{ outline:3px solid var(--petroleo); outline-offset:2px; border-radius:6px }
.t3-nota{ margin:0; padding-left:.9rem; border-left:2px solid var(--t3-alerta); font-family:var(--lee); font-size:.98rem; color:var(--tinta-2); line-height:1.55 }

/* ---------- guía: qué aparece en cada nivel */
.t3-g{ margin-top:var(--e-xl) }
.t3-g__tit{ font-family:var(--sans); font-size:var(--t-seccion); font-weight:650; color:var(--tinta); margin:0; letter-spacing:-.01em }
.t3-g__k{ margin:.3rem 0 var(--e-md); color:var(--mudo); font-size:.95rem }
.t3-g__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2.6vw,2.5rem) }
.t3-g__h{ display:flex; align-items:baseline; gap:.5rem; margin:0 0 .5rem; font-family:var(--sans); font-size:1.02rem; font-weight:650; color:var(--tinta) }
.t3-g__h i{ align-self:center; width:.8rem; height:.8rem; border-radius:3px; background:var(--c) }
.t3-g__h small{ font-weight:500; color:var(--mudo); font-size:.88rem }
.t3-g__l{ list-style:none; margin:0; padding:0; position:relative }
.t3-g__l::before{ content:""; position:absolute; left:21px; top:22px; bottom:22px; width:2px; background:rgba(14,23,38,.1) }
.t3-g__b{ position:relative; width:100%; min-height:var(--toque, 44px); display:grid; grid-template-columns:44px 1fr; align-items:center; gap:.35rem; padding:.2rem .5rem .2rem 0; border:0; border-radius:10px; background:transparent; color:var(--mudo); font:inherit; font-family:var(--sans); font-size:.92rem; line-height:1.3; text-align:left; cursor:pointer; transition:color .2s, background-color .2s }
.t3-g__n{ justify-self:center; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--niebla); box-shadow:inset 0 0 0 1.5px rgba(14,23,38,.25); font-weight:700; font-size:.8rem; color:var(--mudo); position:relative; z-index:1; transition:background-color .25s, box-shadow .25s, color .25s, transform .25s }
.t3-g__b:hover{ background:rgba(14,23,38,.04); color:var(--tinta) }
.t3-g__b.es-on{ color:var(--tinta) }
.t3-g__b.es-on .t3-g__n{ background:var(--c); box-shadow:none; color:var(--tinta) }
.t3-g__b[aria-current="true"]{ background:color-mix(in srgb, var(--c) 16%, transparent); font-weight:600 }
.t3-g__b[aria-current="true"] .t3-g__n{ transform:scale(1.14); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent) }
.t3-g__b:focus-visible{ outline:3px solid var(--petroleo); outline-offset:0 }

/* ---------- cadena de seis eslabones */

/* ---------- 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) }
@media (prefers-reduced-motion:reduce){
  .t3-svg *, .t3-svg *::before{ animation:none !important }
  .t3-n-traza path{ stroke-dashoffset:0 }
  .t3-res__barra i{ transition:none }
}

/* ---------- adaptable */
@media (max-width:64rem){
  .t3-lab{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) }
}
@media (max-width:52rem){
  .t3-lab{ grid-template-columns:1fr; margin-top:var(--e-lg) }
  .t3-fig{ position:static }
  .t3-g__cols{ grid-template-columns:1fr; gap:var(--e-md) }
}
/* v24b: bajo 64rem el dibujo ya no se fija (tapaba más de media pantalla); se acota su alto. */
@media (max-width:63.99rem){
  .t3-fig, .dt .t3-fig{ position:relative; top:auto }
  .t3-svg{ max-height:38vh; margin-inline:auto }
}
@media (max-width:52rem) and (min-height:640px){
  .t3-res{ padding-top:.4rem; row-gap:.3rem }
  .t3-res__n b{ font-size:2rem }
  .t3-res__cuenta{ margin-bottom:.15rem }
  .t3-res__msg{ font-size:.9rem; min-height:2.6em }
}
@media (max-width:30rem){
  .t3-fig{ margin-inline:calc(var(--canal) * -.5); padding-inline:.5rem }
  .t3-res{ padding-inline:.5rem }
  .t3-esc__b{ padding:.45rem .5rem }
  .t3-esc__b b{ font-size:.82rem }
  .t3-esc__b small{ font-size:.7rem }
  .t3-eq{ font-size:1.05rem }
  .t3-res__cuenta{ font-size:.85rem; gap:.2rem }
  .t3-res__x{ min-width:1.5rem; height:1.5rem }
  .t3-fs{ padding-inline:.9rem }
}