/* ui_5940.css · sistema visual unico de 5940 SW 18th St (pagina de entrega + visor 3D + herramientas)
   v20261018d · agente diseno · detalle en entrega_web/DISENO.md
   - Tokens de marca fijos (--bg, --fg, --accent...): nunca se redefinen.
   - Tokens de superficie (--sf-*): los usan los componentes; claros por defecto, oscuros dentro de .u-dark
     (escenario 3D de la pagina, visores de fotos y todo lo que flota sobre el 3D).
   - Sin reglas sobre html/body: cada pagina pone su propio fondo y desplazamiento. */

:root{
  /* marca */
  --bg:#F7F3EC; --bg-2:#EFE8DC; --card:#FBF9F5; --paper:#FFFFFF;
  --fg:#15161A; --muted:#6E6A61; --line:#E6DFD2; --line-2:#D8CFBE;
  --accent:#C9A66B; --accent-hi:#D4B37C; --accent-ink:#8A6A3F; --accent-soft:rgba(201,166,107,.16);
  --water:#8FB0B8; --water-2:#C9DADD;
  --ok:#4E7A59; --warn:#B0623A; --err:#A1412F;
  /* variante oscura (escenario 3D, visores, capas sobre el 3D) */
  --dark:#15161A; --dark-2:#1F2127; --dark-3:#0E0F12;
  --on-dark:#ECE8E0; --on-dark-muted:#A39E93; --on-dark-line:rgba(236,232,224,.16); --on-dark-line-2:rgba(236,232,224,.3);
  --glass:rgba(21,22,26,.74); --glass-2:rgba(21,22,26,.88); --glass-line:rgba(236,232,224,.13);
  --glass-blur:blur(18px) saturate(1.25);
  /* tipografia */
  --display:"DM Serif Display","Didot",Georgia,"Times New Roman",serif;
  --body:"Manrope","Helvetica Neue",Arial,system-ui,sans-serif;
  --fs-micro:.66rem; --fs-xs:.72rem; --fs-sm:.82rem; --fs-md:.92rem; --fs-base:1rem;
  --track-caps:.16em;
  /* espacios (escala de 4) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px; --sp-9:108px;
  /* radios */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  /* sombras */
  --sh-1:0 1px 2px rgba(21,22,26,.06),0 4px 14px rgba(21,22,26,.06);
  --sh-2:0 14px 44px rgba(21,22,26,.16),0 2px 6px rgba(21,22,26,.06);
  --sh-3:0 40px 90px -40px rgba(0,0,0,.7);
  /* movimiento */
  --ease:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --t-fast:.15s; --t:.25s; --t-slow:.55s;
  /* superficie clara (por defecto) */
  --sf-bg:var(--bg); --sf-card:var(--card); --sf-fg:var(--fg); --sf-muted:var(--muted);
  --sf-line:var(--line); --sf-line-2:var(--line-2); --sf-raise:rgba(255,255,255,.72); --sf-hover:var(--accent-soft);
  --sf-accent-ink:var(--accent-ink); --sf-focus:var(--accent-ink); --sf-ok:var(--ok); --sf-warn:var(--warn);
  --sf-invert-bg:var(--fg); --sf-invert-fg:var(--bg);
}
.u-dark{
  --sf-bg:var(--dark); --sf-card:var(--dark-2); --sf-fg:var(--on-dark); --sf-muted:var(--on-dark-muted);
  --sf-line:var(--on-dark-line); --sf-line-2:var(--on-dark-line-2); --sf-raise:rgba(236,232,224,.06); --sf-hover:rgba(236,232,224,.09);
  --sf-accent-ink:var(--accent); --sf-focus:var(--accent); --sf-ok:#8DBF98; --sf-warn:#E39A72;
  --sf-invert-bg:var(--on-dark); --sf-invert-fg:var(--dark);
  color:var(--sf-fg);
}

/* ------------------------------------------------------------ texto */
.eyebrow,.u-kicker{font:700 var(--fs-xs)/1.4 var(--body);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--sf-accent-ink)}
.u-display{font-family:var(--display);font-weight:400;letter-spacing:.005em}
.u-num{font-variant-numeric:lining-nums tabular-nums}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
kbd,.u-kbd{font:700 10.5px/1 var(--body);border:1px solid var(--sf-line-2);background:var(--sf-raise);border-radius:5px;padding:2px 5px;color:var(--sf-fg)}

/* ------------------------------------------------------------ foco */
:focus-visible{outline:2px solid var(--sf-focus);outline-offset:3px}

/* ------------------------------------------------------------ boton (pildora) */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;border-radius:var(--r-pill);padding:12px 22px;
  font:600 .86rem/1.1 var(--body);letter-spacing:.03em;text-decoration:none;border:1px solid var(--sf-fg);color:var(--sf-fg);background:transparent;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),background-color var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease;white-space:nowrap;
  -webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-1px);background:var(--sf-hover)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:18px;height:18px;flex:none}
.btn.primary{background:var(--sf-invert-bg);border-color:var(--sf-invert-bg);color:var(--sf-invert-fg)}
.btn.primary:hover{background:var(--sf-invert-bg);opacity:.92}
.btn.bronze,.btn.oro{background:var(--accent);border-color:var(--accent);color:var(--fg)}
.btn.bronze:hover,.btn.oro:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn.ghost-light{border-color:rgba(247,243,236,.75);color:#F7F3EC}
.btn.ghost-light:hover{background:rgba(247,243,236,.12)}
.btn.quiet{border-color:var(--sf-line-2)}
.btn.small,.btn.chico{min-height:38px;padding:8px 14px;font-size:.78rem;gap:7px}
.btn.small svg,.btn.chico svg{width:16px;height:16px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ------------------------------------------------------------ chip (conmutador) */
.chip{appearance:none;display:inline-flex;align-items:center;gap:7px;min-height:38px;border-radius:var(--r-pill);border:1px solid var(--sf-line-2);background:transparent;
  color:var(--sf-fg);padding:7px 14px;font:600 .8rem/1 var(--body);cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background-color var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease;-webkit-tap-highlight-color:transparent}
.chip svg{width:16px;height:16px;flex:none}
.chip:hover{border-color:var(--sf-fg);background:var(--sf-hover)}
/* modo elegido: crema sobre oscuro / tinta sobre claro.  interruptor encendido (.sw): bronce */
.chip[aria-pressed="true"],.chip.on{background:var(--sf-invert-bg);color:var(--sf-invert-fg);border-color:var(--sf-invert-bg)}
.chip.sw[aria-pressed="true"],.chip.sw.on{background:var(--accent);border-color:var(--accent);color:var(--fg)}

/* ------------------------------------------------------------ etiqueta de estado */
.tag{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(247,243,236,.5);border-radius:var(--r-pill);padding:6px 12px;
  font:700 .68rem/1 var(--body);letter-spacing:var(--track-caps);text-transform:uppercase;color:#F2ECE1;background:rgba(21,22,26,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(201,166,107,.3)}

/* ------------------------------------------------------------ vidrio (capas sobre el 3D) y tarjeta */
.u-glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-md);box-shadow:0 12px 40px rgba(0,0,0,.22);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.u-card{background:var(--sf-card);border:1px solid var(--sf-line);border-radius:var(--r-md)}

/* ------------------------------------------------------------ boton redondo de icono (cerrar, anterior, siguiente) */
.u-ib{appearance:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--sf-line-2);background:transparent;color:var(--sf-fg);display:grid;place-items:center;
  cursor:pointer;padding:0;text-decoration:none;transition:background-color var(--t-fast) ease,border-color var(--t-fast) ease}
.u-ib:hover{background:var(--sf-hover);border-color:var(--sf-fg)}
.u-ib svg{width:20px;height:20px}

/* ------------------------------------------------------------ barra de progreso */
.u-progress{width:200px;max-width:70vw;height:2px;background:rgba(236,232,224,.14);border-radius:2px;overflow:hidden}
.u-progress>i{display:block;height:100%;background:var(--accent)}

/* ------------------------------------------------------------ movimiento reducido */
@media (prefers-reduced-motion:reduce){
  .btn,.chip,.u-ib{transition:none}
  .btn:hover,.btn:active{transform:none}
}