/* ═══════════════════════════════════════════════════════════
   PITTAHAYA · el sistema en las manos de quien mira
   Una consola que reescribe los tokens de ESTA página en vivo,
   los mundos de los demos aplicados sobre ella, y la auditoría
   que la página se hace a sí misma.
   ═══════════════════════════════════════════════════════════ */

/* ── tokens que la consola mueve ──────────────────────────── */
:root{--radio:10px;--dens:1}
html[data-voz="tecnica"]{--serif:"Space Grotesk",system-ui,sans-serif}
html[data-escala="intima"]{--t-display:clamp(38px,6.4vw,104px);--t-1:clamp(30px,4.2vw,62px);--t-2:clamp(23px,2.8vw,38px);--t-3:clamp(18px,1.9vw,25px)}
html[data-escala="monumental"]{--t-display:clamp(54px,12.5vw,210px);--t-1:clamp(42px,7.4vw,118px);--t-2:clamp(29px,4.2vw,64px);--t-3:clamp(21px,2.6vw,36px)}
html[data-dens="compacta"]{--dens:.66}
html[data-dens="amplia"]{--dens:1.34}
.tramo{padding-block:calc(clamp(64px,11vh,132px) * var(--dens))}
.semilla,.mod,.boton,.foto,.lab,.aud{border-radius:var(--radio)}
.tono{border-radius:calc(var(--radio) * .6)}

/* ── la consola ───────────────────────────────────────────── */
.lab{
  position:relative;margin:clamp(28px,5vh,52px) 0 0;padding:clamp(18px,2.4vw,30px);
  border:1px solid var(--linea-2);background:linear-gradient(180deg,rgba(244,239,230,.045),rgba(244,239,230,.012));
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(18px,2.6vw,38px);
}
.lab__head{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--linea)}
.lab__head b{font-family:var(--serif);font-weight:340;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.02em}
.lab__head span{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--marfil-3)}
.lab__ctrl{display:grid;gap:10px;align-content:start}
.lab__ctrl > b{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--marfil-3);font-weight:400}
.lab__row{display:grid;gap:14px}
.lab__opts{display:flex;flex-wrap:wrap;gap:6px}
.lab__opt{
  min-height:40px;padding:0 14px;border:1px solid var(--linea-2);border-radius:var(--radio);
  font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--marfil-2);
  transition:color .3s,border-color .3s,background .3s;
}
.lab__opt:hover{color:var(--marfil);border-color:var(--marfil-3)}
.lab__opt[aria-pressed="true"]{background:var(--marfil);border-color:var(--marfil);color:var(--negro)}
.lab__opt i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:8px;vertical-align:-1px;background:var(--c)}
.lab__code{
  display:flex;flex-direction:column;min-width:0;border:1px solid var(--linea);background:rgba(8,7,10,.6);
  border-radius:var(--radio);overflow:hidden;
}
.lab__code header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--linea);font:400 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--marfil-3)}
.lab__code pre{margin:0;padding:14px;overflow:auto;font:400 11.5px/1.75 var(--mono);color:var(--marfil-2);white-space:pre;max-height:270px}
.lab__code pre b{color:var(--lima);font-weight:400}
.lab__code pre em{color:var(--fruta-viva);font-style:normal}
.lab__copy{min-height:34px;padding:0 12px;border:1px solid var(--linea-2);border-radius:6px;font:400 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--marfil-2);transition:.3s}
.lab__copy:hover{color:var(--negro);background:var(--lima);border-color:var(--lima)}
.lab__note{grid-column:1/-1;margin:0;font-family:var(--mono);font-size:10.5px;color:var(--marfil-3)}

/* ── vestir la página con el mundo de un demo ─────────────── */
.semilla-probar{
  position:absolute;z-index:4;right:16px;bottom:16px;min-height:38px;padding:0 14px;
  border:1px solid var(--m-linea,var(--linea-2));border-radius:var(--radio);
  background:color-mix(in srgb,var(--m-fondo,var(--negro)) 72%,transparent);backdrop-filter:blur(8px);
  font:400 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--m-texto,var(--marfil));
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease),background .3s,color .3s;
}
.semilla:hover .semilla-probar,.semilla:focus-within .semilla-probar{opacity:1;transform:none}
.semilla-probar:hover{background:var(--m-acento,var(--lima));color:var(--m-fondo,var(--negro));border-color:var(--m-acento,var(--lima))}
@media (hover:none){.semilla-probar{opacity:1;transform:none}}

.viste{
  position:fixed;z-index:80;left:50%;bottom:22px;transform:translate(-50%,160%);
  display:flex;align-items:center;gap:18px;padding:12px 12px 12px 20px;
  border:1px solid var(--linea-2);border-radius:999px;background:rgba(8,7,10,.86);backdrop-filter:blur(14px);
  font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--marfil-2);
  transition:transform .7s var(--ease);box-shadow:0 26px 70px rgba(0,0,0,.6);
}
.viste.on{transform:translate(-50%,0)}
.viste b{color:var(--marfil);font-weight:400}
.viste button{min-height:38px;padding:0 16px;border:1px solid var(--linea-2);border-radius:999px;font:inherit;color:var(--marfil);transition:.3s}
.viste button:hover{background:var(--marfil);color:var(--negro);border-color:var(--marfil)}

/* ── teléfono ─────────────────────────────────────────────── */
@media (max-width:860px){
  .lab{grid-template-columns:minmax(0,1fr);padding:16px}
  .lab__code pre{max-height:180px;font-size:10.5px}
  .viste.on{transform:none}
  .viste b{display:block}
}
@media (prefers-reduced-motion:reduce){
  .semilla-probar,.viste{transition:none}
}

/* teléfono: la marca y el interruptor no se pisan */
@media (max-width:620px){
  .barra{gap:8px}
  .firma img{width:26px;height:26px}
  .firma b{font-size:14px;letter-spacing:.12em}
  .firma span span{display:none}
  .xray-sw{padding:0 12px;min-height:40px;font-size:9px;letter-spacing:.14em;white-space:nowrap}
}

/* ── la auditoría: la página medida en vivo ───────────────── */
.aud{margin-top:clamp(28px,5vh,56px);border:1px solid var(--linea-2);border-radius:var(--radio);overflow:hidden}
.aud__fila{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;align-items:center;gap:16px;padding:16px 24px;border-top:1px solid var(--linea)}
.aud__fila:first-child{border-top:0}
.aud__fila:nth-child(odd){background:rgba(244,239,230,.018)}
.aud__k{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--marfil-3)}
.aud__v{font-family:var(--serif);font-weight:340;font-size:clamp(18px,2vw,26px);letter-spacing:-.02em;color:var(--marfil)}
.aud__v small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--marfil-3);margin-left:10px}
.aud__e{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:var(--lima)}
.aud__e i{width:8px;height:8px;border-radius:50%;background:var(--lima);box-shadow:0 0 10px rgba(159,206,58,.6)}
.aud__e.ojo{color:var(--champan)}
.aud__e.ojo i{background:var(--champan);box-shadow:0 0 10px rgba(217,195,160,.6)}
.aud__barra{position:relative;height:4px;border-radius:2px;background:rgba(244,239,230,.1);overflow:hidden;margin-top:10px}
.aud__barra i{position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:linear-gradient(90deg,var(--lima),var(--fruta-viva));transition:width .8s var(--ease)}
.aud__pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--linea);background:rgba(8,7,10,.5);font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--marfil-3)}
.aud__pie b{color:var(--lima);font-weight:400}
@media (max-width:860px){
  .aud__fila{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:16px}
  .aud__k{grid-column:1/-1}
  .aud__v{font-size:19px}
  .aud__v small{display:block;margin:6px 0 0}
  .aud__e{justify-self:end}
}