/* ==========================================================================
   Animaciones explicativas de la tarima modular — solo CSS y SVG
   ========================================================================== */

.expl{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.expl{grid-template-columns:1fr}}

.expl__item{background:var(--tinta);display:flex;flex-direction:column}
.expl__vista{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 100%,#191B20 0%,#0B0B0C 64%)}
.expl__vista::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:44px 100%}
.expl__svg{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.expl__pie{padding:16px 18px 20px;border-top:1px solid var(--linea);flex:1}
.expl__ref{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;color:var(--rojo-claro);
  text-transform:uppercase;margin:0 0 .5rem}
.expl__t{font-family:var(--display);font-weight:700;font-size:1.18rem;line-height:1.08;color:#fff;
  text-transform:uppercase;margin:0 0 .45rem}
.expl__d{font-size:.9rem;color:var(--humo);margin:0;line-height:1.5}

/* trazos comunes */
.expl__svg .al{fill:#C6CBD2;stroke:#8A929C;stroke-width:1.5}      /* aluminio */
.expl__svg .al-2{fill:#9AA1AA;stroke:#7A828C;stroke-width:1.5}
.expl__svg .tab{fill:#232527;stroke:#3A3D42;stroke-width:1.5}     /* tablero */
.expl__svg .suelo{stroke:#3A3E45;stroke-width:1.5;stroke-dasharray:6 5}
.expl__svg .cota{stroke:var(--rojo);stroke-width:1.5}
.expl__svg .rot{font-family:var(--mono);font-size:11px;fill:var(--humo);letter-spacing:.08em}
.expl__svg .rot-r{fill:var(--rojo-claro);font-weight:500}
.expl__svg .persona{fill:#4C525C}

/* ---------- 01 · altura regulable ---------- */
.sube{animation:sube 13s cubic-bezier(.5,0,.2,1) infinite}
@keyframes sube{
  0%,18%{transform:translateY(0)} 25%,43%{transform:translateY(-24px)}
  50%,68%{transform:translateY(-48px)} 75%,93%{transform:translateY(-96px)}
  100%{transform:translateY(0)}
}
.pata{transform-box:fill-box;transform-origin:bottom;animation:pata-crece 13s cubic-bezier(.5,0,.2,1) infinite}
@keyframes pata-crece{
  0%,18%{transform:scaleY(1)} 25%,43%{transform:scaleY(2)}
  50%,68%{transform:scaleY(3)} 75%,93%{transform:scaleY(5)}
  100%{transform:scaleY(1)}
}
.cota-alto{transform-box:fill-box;transform-origin:bottom;animation:pata-crece 13s cubic-bezier(.5,0,.2,1) infinite}
.alt-txt{opacity:0;animation:alt-txt 13s steps(1,end) infinite}
.alt-txt:nth-of-type(1){animation-delay:0s}
.alt-txt:nth-of-type(2){animation-delay:-9.75s}
.alt-txt:nth-of-type(3){animation-delay:-6.5s}
.alt-txt:nth-of-type(4){animation-delay:-3.25s}
@keyframes alt-txt{0%,24%{opacity:1}25%,100%{opacity:0}}

/* ---------- 02 · anatomía por capas ---------- */
.capa{animation:capa 11s cubic-bezier(.3,.7,.3,1) infinite}
.capa--tab{--sep:-60px}
.capa--marco{--sep:-22px}
.capa--patas{--sep:30px}
@keyframes capa{
  0%,32%{transform:translateY(var(--sep))}
  46%,72%{transform:translateY(0)}
  86%,100%{transform:translateY(var(--sep))}
}
.capa-rot{animation:capa-rot 11s ease infinite}
@keyframes capa-rot{0%,34%{opacity:1}44%,74%{opacity:0}84%,100%{opacity:1}}

/* ---------- 03 · complementos ---------- */
.comp{transform-box:fill-box;opacity:0;animation:comp 12s ease-in-out infinite}
.comp--faldon{transform-origin:top;animation-name:comp-faldon}
.comp--escalera{animation-delay:1.4s}
.comp--baranda{animation-delay:2.8s}
.comp--rueda{animation-delay:4.2s}
@keyframes comp{
  0%,4%{opacity:0;transform:translateY(14px)}
  12%,72%{opacity:1;transform:translateY(0)}
  84%,100%{opacity:0;transform:translateY(14px)}
}
@keyframes comp-faldon{
  0%,4%{opacity:0;transform:scaleY(0)}
  12%,72%{opacity:1;transform:scaleY(1)}
  84%,100%{opacity:0;transform:scaleY(0)}
}

/* ==========================================================================
   Configurador visual de medidas
   ========================================================================== */
.medidas{border:1px solid var(--linea);background:var(--grafito);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px)}
@media (max-width:900px){.medidas{grid-template-columns:1fr}}
.medidas__dibujo{position:relative;aspect-ratio:16/10;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 100%,#191B20 0%,#0B0B0C 66%);border-right:1px solid var(--linea)}
@media (max-width:900px){.medidas__dibujo{border-right:0;border-bottom:1px solid var(--linea)}}
.medidas__svg{position:absolute;inset:0;width:100%;height:100%}
.medidas__panel{padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:16px}
.mando{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mando__et{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--humo)}
.mando__ctrl{display:flex;align-items:stretch;border:1px solid var(--linea);background:var(--tinta)}
.mando__ctrl button{background:transparent;border:0;color:#fff;width:40px;font-size:1.25rem;
  line-height:1;cursor:pointer;font-family:var(--display);transition:background var(--trans)}
.mando__ctrl button:hover:not(:disabled){background:var(--rojo)}
.mando__ctrl button:disabled{opacity:.3;cursor:not-allowed}
.mando__ctrl output{min-width:74px;display:flex;align-items:center;justify-content:center;
  border-inline:1px solid var(--linea);font-family:var(--display);font-weight:700;font-size:1.2rem;
  color:#fff;font-variant-numeric:tabular-nums}
.medidas__datos{border-top:1px solid var(--linea);padding-top:14px;margin-top:2px}
.medidas__datos dl{margin:0;display:grid;gap:0}
.medidas__datos div{display:flex;justify-content:space-between;gap:12px;padding:.5rem 0;
  border-bottom:1px dashed var(--linea)}
.medidas__datos div:last-child{border-bottom:0}
.medidas__datos dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--humo)}
.medidas__datos dd{margin:0;font-family:var(--display);font-weight:600;font-size:1.02rem;color:#fff;
  text-align:right;font-variant-numeric:tabular-nums}
.medidas__nota{font-size:.84rem;color:var(--humo);margin:0;line-height:1.5}
.medidas__nota b{color:var(--rojo-claro)}
.medidas__svg .mod{fill:#22252A;stroke:#7A828C;stroke-width:1.2}
.medidas__svg .mod--medio{fill:#191C21}
.medidas__svg .borde{fill:none;stroke:var(--rojo);stroke-width:2}
.medidas__svg .cota{stroke:var(--rojo);stroke-width:1.2}
.medidas__svg .rot{font-family:var(--mono);font-size:12px;fill:var(--humo-claro);letter-spacing:.06em}
.medidas__svg .fig{fill:#4C525C}

@media (prefers-reduced-motion:reduce){
  .sube,.pata,.cota-alto,.capa,.capa-rot,.comp{animation:none}
  .sube{transform:translateY(-96px)}
  .pata,.cota-alto{transform:scaleY(5)}
  .alt-txt{animation:none;opacity:0}
  .alt-txt:nth-of-type(4){opacity:1}
  .capa{transform:none}
  .comp{opacity:1;transform:none}
  .comp--faldon{transform:scaleY(1)}
}