/* Vizzo · estilo compartido (familia visual de Fractal: negro, hueso, Archivo condensada, visor de cámara) */
:root{
  --negro:#000; --carbon:#0A0A0A; --grafito:#141414; --borde:rgba(236,236,234,.14); --borde-2:rgba(236,236,234,.28);
  --hueso:#ECECEA; --hueso-2:rgba(236,236,234,.72); --hueso-3:rgba(236,236,234,.48);
  --ok:#8FE3B0; --aviso:#F2C36B; --mal:#FF7A6B; --rec:#FF3B30;
  --font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{background:var(--negro);color:var(--hueso);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.45}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%}

/* Tipografía */
.lbl{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--hueso-3)}
.tit{font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.005em;text-wrap:balance}
.tit-xl{font-size:clamp(46px,7vw,112px)}
.tit-l{font-size:clamp(34px,4.2vw,58px)}
.tit-m{font-size:clamp(26px,2.6vw,36px)}
.txt{color:var(--hueso-2);max-width:40ch}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.chico{font-size:13px;color:var(--hueso-3)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:999px;border:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:transform .4s var(--ease),background .3s,opacity .3s;white-space:nowrap}
.btn:hover{transform:scale(1.03)}
.btn:active{transform:scale(.98)}
.btn--hueso{background:var(--hueso);color:#000}
.btn--linea{background:transparent;color:var(--hueso);box-shadow:inset 0 0 0 1.5px rgba(236,236,234,.55)}
.btn--wa{background:#25D366;color:#04210F}
.btn--bloque{width:100%}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn:focus-visible,.foco:focus-visible{outline:2px solid var(--hueso);outline-offset:3px}
.enlace{background:none;border:0;padding:0;color:var(--hueso);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid var(--hueso-3);padding-bottom:2px;text-decoration:none}
.enlace input{position:absolute;opacity:0;width:1px;height:1px}

/* Visor de cámara (esquinas, REC, código de tiempo) */
.visor{position:absolute;inset:0;pointer-events:none;z-index:3;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(236,236,234,.8)}
.visor i.es{position:absolute;width:26px;height:26px;border:1.5px solid rgba(236,236,234,.55)}
.visor .tl{top:16px;left:16px;border-right:0!important;border-bottom:0!important}
.visor .tr{top:16px;right:16px;border-left:0!important;border-bottom:0!important}
.visor .bl{bottom:16px;left:16px;border-right:0!important;border-top:0!important}
.visor .br{bottom:16px;right:16px;border-left:0!important;border-top:0!important}
.visor .rec{position:absolute;top:22px;left:54px;display:flex;align-items:center;gap:8px}
.visor .rec b{width:9px;height:9px;border-radius:50%;background:var(--hueso-3)}
.visor .rec.on b{background:var(--rec);animation:parpadeo 1.2s steps(2) infinite}
.visor .tc{position:absolute;top:22px;right:54px}
.visor .info{position:absolute;bottom:22px;left:54px;right:54px;display:flex;justify-content:space-between;gap:12px}
.visor .mira{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;opacity:.3}
.visor .mira::before,.visor .mira::after{content:"";position:absolute;background:var(--hueso)}
.visor .mira::before{left:50%;top:0;bottom:0;width:1px}
.visor .mira::after{top:50%;left:0;right:0;height:1px}
@keyframes parpadeo{50%{opacity:0}}

/* Superficies */
.linea{border-top:1px solid var(--borde)}
.caja{border:1px solid var(--borde);border-radius:14px;padding:16px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;background:var(--hueso);color:#000;padding:12px 18px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:all .35s var(--ease);z-index:50;pointer-events:none}
.toast.ver{opacity:1;transform:translate(-50%,0)}
.gira{width:14px;height:14px;border-radius:50%;border:2px solid rgba(0,0,0,.2);border-top-color:#000;animation:gira .9s linear infinite;display:inline-block}
@keyframes gira{to{transform:rotate(360deg)}}

/* Campos */
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--hueso-3)}
.campo input,.campo select{background:var(--grafito);border:1px solid var(--borde);border-radius:12px;padding:14px;font-size:16px;width:100%;outline:none;transition:border-color .2s}
.campo input:focus,.campo select:focus{border-color:var(--hueso)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--borde-2);background:transparent;border-radius:999px;padding:9px 14px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--hueso-2)}
.chip[aria-pressed="true"]{background:var(--hueso);color:#000;border-color:var(--hueso)}
input[type=range]{width:100%;accent-color:var(--hueso)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}