/* ============================================================
   ACERO — DESIGN TOKENS
   ============================================================ */
:root{
  --titanium-1:#c9cacb;
  --titanium-2:#a3a4a5;
  --titanium-3:#797a7b;
  --titanium-4:#55565a;
  --graphite-1:#3c3d40;
  --graphite-2:#26272a;
  --black:#0a0a0b;
  --black-soft:#141416;
  --white:#f3f2ef;
  --stone:#e4e2dd;
  --sky-1:#c3d8e6;
  --sky-2:#7fa0b8;
  --sky-3:#3f5f76;
  --leather:#6b5240;
  --wood:#8c7355;
  --arcanum-reader-bg-image:url("../assets/arcanum/FONDO LECTURA EN WEB.webp");
  --arcanum-reader-bg-1:#2f2f31;
  --arcanum-reader-bg-2:#2a2b2e;

  --photo-interior: url("../assets/web/interior-embedded.jpg");;
  --photo-exterior: url("../assets/web/exterior-embedded.jpg");;
  --photo-construccion: url("../assets/web/construccion.jpg");;
  --photo-comunidad: url("../assets/web/comunidad-embedded.jpg");;
  --photo-panel-text: url("../assets/web/panel-text.jpg");;
  --photo-sky-beams: url("../assets/web/sky-beams.jpg");;
  --photo-ambient: url("../assets/web/ambient.jpg");;
  --photo-cierre: url("../assets/web/cierre.jpg");;
  --photo-hombre: url("../assets/web/hombre.jpg");;
  --photo-closet-room: url("../assets/web/closet-room.jpg");;
  --photo-closet: url("../assets/web/closet.jpg");;
  --photo-arcanum-plate: url("../assets/arcanum/plate.jpg");;
  --photo-arcanum-cover: url("../assets/arcanum/cover.jpg");;
  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;

  --dur-scene: 1400ms;
  --ease-scene: cubic-bezier(.22,.61,.22,1);
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-scene: 220ms; }
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; height:100dvh; }
body{
  background:var(--graphite-2);
  color:var(--white);
  font-family:var(--font-body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }
:focus-visible{ outline:1px solid var(--titanium-1); outline-offset:6px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ============================================================
   GRAIN + BRUSHED TITANIUM TEXTURES
   ============================================================ */
.grain-overlay{
  position:fixed; inset:0; z-index:500; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.brushed{
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,0) 1px, rgba(0,0,0,.05) 2px, rgba(0,0,0,0) 3px);
}

/* ============================================================
   APP SHELL / SCENE ENGINE
   ============================================================ */
#app{ position:relative; width:100%; height:100%; height:100dvh; }

.home-btn{
  position:fixed; top:calc(28px + env(safe-area-inset-top, 0px)); left:calc(32px + env(safe-area-inset-left, 0px)); z-index:400;
  font-family:var(--font-display); font-weight:500; font-size:15px;
  letter-spacing:.14em; color:var(--titanium-1);
  opacity:0; pointer-events:none; transition:opacity 600ms ease;
}
.home-btn.show{ opacity:.85; pointer-events:auto; }
.home-btn:hover{ color:var(--white); }

.scene-progress{
  position:fixed; right:calc(30px + env(safe-area-inset-right, 0px)); top:50%; transform:translateY(-50%);
  z-index:400; display:flex; flex-direction:column; gap:14px;
  opacity:0; pointer-events:none; transition:opacity 600ms ease;
}
.scene-progress.show{ opacity:1; pointer-events:auto; }
.scene-progress .dot{
  width:22px; height:22px; padding:0; border:none; background:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.scene-progress .dot::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:rgba(243,242,239,.28); transition:background 400ms, transform 400ms;
}
.scene-progress .dot:hover::before{ background:rgba(243,242,239,.6); }
.scene-progress .dot.active::before{ background:var(--titanium-1); transform:scale(1.6); }

.scene{
  position:fixed; inset:0;
  opacity:0; visibility:hidden;
  pointer-events:none;
  transform:scale(1.03);
  filter:blur(6px);
  transition:
    opacity var(--dur-scene) var(--ease-scene),
    transform var(--dur-scene) var(--ease-scene),
    filter var(--dur-scene) var(--ease-scene),
    visibility 0s linear var(--dur-scene);
  display:flex; align-items:center; justify-content:center;
}
.scene.active{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:scale(1); filter:blur(0);
  transition:
    opacity var(--dur-scene) var(--ease-scene),
    transform var(--dur-scene) var(--ease-scene),
    filter var(--dur-scene) var(--ease-scene),
    visibility 0s linear 0s;
}
.scene.leaving{
  transform:scale(.97); filter:blur(4px);
}
@media (prefers-reduced-motion: reduce){
  .scene{ transform:none !important; filter:none !important; }
}

.scene-inner{
  position:relative; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8vh 6vw;
}

/* scene index — reduced to a discreet number only; the word label is hidden
   since the interactive dots on the right already communicate the station */
.scene-marker{
  position:absolute; top:30px; left:50%; transform:translateX(-50%);
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--font-body); font-weight:500; font-size:10px; letter-spacing:.18em;
  color:var(--titanium-3); opacity:.5;
}
.scene-marker .n{ color:var(--titanium-2); }
.scene-marker span:not(.n){ display:none; }

.whisper-hint{
  position:absolute; bottom:56px; left:50%; transform:translateX(-50%);
  font-family:var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:.18em;
  color:var(--titanium-3); opacity:0; transition:opacity 900ms ease;
  text-transform:uppercase;
}
.scene.active .whisper-hint{ opacity:.65; transition-delay:2600ms; }

/* ============================================================
   ENTRY SCENE
   ============================================================ */
#scene-entry{ background:#2b2c2e; overflow:hidden; }
.hero-arch{ position:absolute; inset:0; display:flex; }
.hero-wall-titanium{
  flex:0 0 58%; position:relative;
  background-image:var(--photo-panel-text);
  background-size:cover; background-position:center 22%;
}
.hero-wall-titanium::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(55% 48% at 30% 15%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 62%);
  mix-blend-mode:overlay;
}
.hero-wall-concrete{
  flex:1 1 42%; position:relative;
  background-image:var(--photo-sky-beams);
  background-size:cover; background-position:center 55%;
}
.hero-concrete-edge{
  position:absolute; top:0; bottom:0; left:0; width:1px;
  background:rgba(0,0,0,.35); box-shadow:-6px 0 24px rgba(0,0,0,.25);
}
.hero-scrim{
  position:absolute; inset:0;
  background:radial-gradient(62% 58% at 50% 42%, rgba(10,10,11,.72) 0%, rgba(10,10,11,.4) 48%, rgba(10,10,11,.08) 74%);
}
.entry-wordmark{
  font-family:var(--font-display); font-weight:400; font-style:normal;
  font-size:clamp(64px, 13vw, 168px); letter-spacing:.07em;
  background:linear-gradient(100deg,
    var(--titanium-4) 0%, var(--titanium-3) 16%, var(--titanium-2) 32%,
    #f5f5f4 44%, #ffffff 50%, #f5f5f4 56%,
    var(--titanium-2) 68%, var(--titanium-3) 84%, var(--titanium-4) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 4px 40px rgba(0,0,0,.35);
  animation:shimmer 7s ease-in-out infinite;
  margin-bottom:6px;
}
@keyframes shimmer{
  0%{ background-position:0% 0; }
  100%{ background-position:280% 0; }
}
.entry-tagline{
  font-family:var(--font-body); font-weight:400; font-size:12.5px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--stone);
  text-shadow:0 2px 16px rgba(0,0,0,.55);
  margin-bottom:9vh;
}
.entry-menu{
  display:flex; gap:56px; align-items:center; margin-bottom:11vh;
}
.entry-menu button{
  font-family:var(--font-display); font-weight:400; font-size:clamp(16px,2vw,20px);
  letter-spacing:.1em; color:var(--stone);
  padding:8px 2px; position:relative;
  transition:color 420ms ease;
}
.entry-menu button::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--titanium-1); transform:scaleX(0); transform-origin:left;
  transition:transform 480ms var(--ease-scene);
}
.entry-menu button:hover, .entry-menu button:focus-visible{ color:var(--white); }
.entry-menu button:hover::after, .entry-menu button:focus-visible::after{ transform:scaleX(1); }
.entry-menu .sep{ width:3px; height:3px; border-radius:50%; background:var(--titanium-3); }

@keyframes whisper-in{ to{ opacity:1; } }

@media (max-width:640px){
  .entry-menu{ flex-direction:column; gap:26px; margin-bottom:8vh; }
}

/* ============================================================
   RECORRER — SHARED SCENE FRAME
   ============================================================ */
.rec-title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(30px, 5vw, 58px); letter-spacing:.03em;
  color:var(--white); margin-bottom:18px;
}
.rec-copy{
  font-family:var(--font-body); font-weight:300; font-size:clamp(14px,1.4vw,16px);
  line-height:1.9; letter-spacing:.01em; color:var(--titanium-1);
  max-width:420px; margin:0;
}

/* editorial text panel — sits in a corner of the photo, never over its focal point */
.text-panel{
  display:inline-flex; flex-direction:column; gap:14px;
  max-width:min(440px, 86vw); padding:26px 26px;
  background:linear-gradient(100deg, rgba(9,9,10,.78), rgba(9,9,10,.5));
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.text-panel.right{ background:linear-gradient(260deg, rgba(9,9,10,.78), rgba(9,9,10,.5)); align-items:flex-end; text-align:right; }

/* diegetic continue-object */
.diegetic{
  position:absolute; background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-bottom:env(safe-area-inset-bottom, 0px);
}
.diegetic .obj{
  transition:transform 500ms var(--ease-scene), filter 500ms ease;
  filter:drop-shadow(0 0 0 rgba(255,255,255,0));
}

/* reusable titanium material strip — used on scenes that have no photo asset,
   so the material language (brushed steel) stays present instead of flat black */
.scene-material-strip::before{
  content:''; position:absolute; top:0; bottom:0; width:3.4vw; min-width:30px; z-index:1;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0px, rgba(0,0,0,0) 1px, rgba(255,255,255,.05) 2px, rgba(255,255,255,0) 3px),
    linear-gradient(100deg, #45474a 0%, #8a8c8e 45%, #55575a 100%);
  opacity:.85;
}
.scene-material-strip.left::before{ left:0; box-shadow:6px 0 30px rgba(0,0,0,.3); }
.scene-material-strip.right::before{ right:0; box-shadow:-6px 0 30px rgba(0,0,0,.3); }
.diegetic:hover .obj, .diegetic:focus-visible .obj{
  transform:translateY(-4px) scale(1.05);
  filter:drop-shadow(0 6px 18px rgba(255,255,255,.18));
}
.diegetic .obj-label{
  font-family:var(--font-body); font-weight:500; font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--titanium-2); opacity:0;
  transition:opacity 400ms ease;
}
.diegetic:hover .obj-label, .diegetic:focus-visible .obj-label{ opacity:.8; }
.diegetic .pulse{
  position:absolute; inset:-14px; border-radius:50%;
  border:1px solid rgba(243,242,239,.35);
  animation:pulse-ring 3.2s ease-out infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(.7); opacity:.6; }
  100%{ transform:scale(1.7); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .diegetic .pulse{ animation:none; opacity:.3; } }

/* ---- 01 INTERIOR ---- */
.scene-photo{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
.scene-photo-overlay{ position:absolute; inset:0; }

#scene-interior{ background:#d7d4cd; overflow:hidden; }
#scene-interior.active .scene-photo,
#scene-interior.leaving .scene-photo{ background-image:var(--photo-interior); }
#scene-interior .scene-photo-overlay{
  background:
    linear-gradient(90deg, rgba(10,9,8,.42) 0%, rgba(10,9,8,.12) 32%, transparent 55%),
    linear-gradient(180deg, rgba(15,13,10,.04) 0%, rgba(15,13,10,.02) 40%, rgba(15,13,10,.3) 100%);
}
#scene-interior .scene-inner{ align-items:flex-start; justify-content:flex-end; text-align:left; padding:0 8vw 12vh; }
#scene-interior .scene-marker, #scene-interior .whisper-hint{ color:var(--titanium-4); }
#scene-interior .rec-title{ color:#ffffff; text-shadow:0 2px 24px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5); }
#scene-interior .rec-copy{ color:#f1efe9; text-shadow:0 1px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); }

/* ---- 02 EXTERIOR ---- */
#scene-exterior{ background:linear-gradient(180deg, var(--sky-1) 0%, var(--sky-3) 100%); }
#scene-exterior .scene-photo{ background-position:center 30%; }
#scene-exterior.active .scene-photo,
#scene-exterior.leaving .scene-photo{ background-image:var(--photo-exterior); }
#scene-exterior .scene-photo-overlay{
  background:linear-gradient(180deg, rgba(8,14,18,.02) 0%, rgba(8,14,18,.02) 45%, rgba(6,11,15,.24) 100%);
}
#scene-exterior .scene-inner{ align-items:flex-end; justify-content:flex-end; text-align:right; padding:0 8vw 12vh; }
#scene-exterior .scene-marker, #scene-exterior .whisper-hint{ color:#0d1b24; opacity:.75; }
#scene-exterior .rec-title{ color:#f6f4ef; text-shadow:0 2px 20px rgba(0,0,0,.4); }
#scene-exterior .rec-copy{ color:#e9e7e0; text-shadow:0 1px 14px rgba(0,0,0,.35); }

/* ---- 03 COMUNIDAD ---- */
#scene-comunidad{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.1) 0px, rgba(0,0,0,0) 1px, rgba(255,255,255,.045) 2px, rgba(255,255,255,0) 3px),
    linear-gradient(100deg, #3d3f42 0%, #6d6f72 20%, #9a9c9e 36%, #7c7e81 50%, #4a4c4e 68%, #86888b 85%, #55575a 100%);
}
#scene-comunidad .scene-photo{
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
#scene-comunidad.active .scene-photo,
#scene-comunidad.leaving .scene-photo{ background-image:var(--photo-comunidad); }
#scene-comunidad .scene-photo-overlay{
  background:linear-gradient(200deg, rgba(10,9,8,.5) 0%, rgba(10,9,8,.05) 30%, transparent 55%);
}
#scene-comunidad .scene-inner{ align-items:flex-end; justify-content:flex-start; text-align:right; padding:11vh 7vw 0; }
#scene-comunidad .rec-title, #scene-comunidad .scene-marker{ color:var(--white); }
#scene-comunidad .rec-copy{ color:var(--stone); }

/* ---- 04 MI PALABRA ---- */
#scene-mipalabra{
  background-size:cover; background-position:center;
}
#scene-mipalabra.active,
#scene-mipalabra.leaving{
  background-image:radial-gradient(120% 90% at 50% 6%, rgba(60,61,64,.55) 0%, rgba(26,27,29,.88) 68%), var(--photo-ambient);
}
.palabra-wrap{ max-width:560px; width:100%; }
.palabra-eyebrow{ font-family:var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--titanium-3); margin-bottom:20px; }
.palabra-q{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.6vw,38px); color:var(--white); margin-bottom:14px; }
.palabra-sub{ font-family:var(--font-body); font-weight:300; font-size:14px; line-height:1.8; color:var(--titanium-1); max-width:440px; margin:0 auto 5vh; }
.palabra-form{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.palabra-input{
  width:100%; min-height:96px; resize:vertical;
  background:transparent; border:none; border-bottom:1px solid rgba(199,201,202,.3);
  color:var(--white); font-family:var(--font-display); font-style:italic; font-size:19px;
  line-height:1.6; text-align:center; padding:10px 4px 16px;
  transition:border-color 300ms ease;
}
.palabra-input::placeholder{ color:var(--titanium-4); opacity:.9; }
.palabra-input:focus{ outline:none; border-bottom-color:var(--titanium-1); }
.palabra-meta{ display:flex; justify-content:space-between; width:100%; font-family:var(--font-body); font-weight:500; font-size:10px; letter-spacing:.08em; color:var(--titanium-4); }
.palabra-submit{
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--black); background:var(--titanium-1); padding:13px 30px; margin-top:6px;
  transition:background 300ms ease, opacity 300ms ease;
}
.palabra-submit:hover{ background:var(--white); }
.palabra-submit:disabled{ opacity:.4; cursor:default; }
.palabra-confirm{
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:.1em; color:var(--titanium-2);
  margin-top:16px; opacity:0; height:0; overflow:hidden; transition:opacity 500ms ease;
}
.palabra-confirm.show{ opacity:.85; height:auto; }
.palabra-wall{
  margin-top:7vh; display:flex; flex-direction:column; gap:20px; max-height:22vh; overflow-y:auto;
  padding:0 4px; border-top:1px solid rgba(199,201,202,.12); padding-top:24px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.palabra-entry{ text-align:center; }
.palabra-entry .txt{ font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--stone); line-height:1.5; }
.palabra-entry .who{ font-family:var(--font-body); font-weight:500; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--titanium-4); margin-top:6px; }
.palabra-moderate{
  position:absolute; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); right:calc(26px + env(safe-area-inset-right, 0px));
  font-family:var(--font-body); font-weight:500; font-size:9px; letter-spacing:.1em; color:var(--titanium-4);
  opacity:.35; transition:opacity 300ms ease;
}
.palabra-moderate:hover{ opacity:.8; }

/* ---- 05 CONSTRUCCIÓN — signature scene ---- */
#scene-construccion{
  background:#0d0d0e;
  overflow:hidden;
  align-items:flex-end;
}
#scene-construccion .scene-photo{ background-position:center 46%; }
#scene-construccion.active .scene-photo,
#scene-construccion.leaving .scene-photo{ background-image:var(--photo-construccion); }
#scene-construccion .scene-photo-overlay{
  background:linear-gradient(180deg, rgba(10,10,11,.5) 0%, rgba(10,10,11,.02) 26%, rgba(8,8,9,.05) 55%, rgba(6,6,7,.86) 100%);
}
/* a single cinematic light sweep across the real steel structure — the scene already
   carries the ACERO signage baked into the photograph, so no illustrated word is layered on top */
.sweep{
  position:absolute; inset:-20% -40%;
  background:linear-gradient(100deg, transparent 42%, rgba(255,255,255,.16) 49%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.16) 51%, transparent 58%);
  transform:translateX(-60%);
  opacity:0;
}
.scene.active .sweep{
  animation:sweep-move 2600ms ease-out 500ms 1 forwards;
}
@keyframes sweep-move{
  0%{ transform:translateX(-60%); opacity:0; }
  15%{ opacity:1; }
  70%{ opacity:.6; }
  100%{ transform:translateX(60%); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .sweep{ display:none; } }
.construccion-statement{
  position:relative; z-index:2;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(26px, 4.8vw, 60px); line-height:1.16; letter-spacing:.01em;
  text-align:left; max-width:860px;
  background:linear-gradient(100deg, var(--titanium-4) 0%, var(--white) 26%, var(--titanium-1) 46%, var(--titanium-4) 64%, var(--white) 84%, var(--titanium-2) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:translateY(10px);
  transition:opacity 1600ms ease 900ms, transform 1600ms var(--ease-scene) 900ms;
}
.scene.active .construccion-statement{
  opacity:1; transform:translateY(0);
  animation:shimmer 8s linear infinite 2200ms;
}
#scene-construccion .scene-inner{
  padding:0 7vw 12vh; align-items:flex-start; justify-content:flex-end; text-align:left;
}

/* ---- 05 HOMBRE ---- */
#scene-hombre{ background:#141414; }
#scene-hombre .scene-photo{ background-position:center 38%; }
#scene-hombre.active .scene-photo,
#scene-hombre.leaving .scene-photo{ background-image:var(--photo-hombre); }
#scene-hombre .scene-photo-overlay{
  background:linear-gradient(200deg, rgba(8,8,9,.55) 0%, rgba(8,8,9,.08) 30%, transparent 55%);
}
#scene-hombre .scene-inner{ align-items:flex-end; justify-content:flex-end; text-align:right; padding:0 6vw 9vh; }
#scene-hombre .text-panel{ background:linear-gradient(260deg, rgba(9,9,10,.9), rgba(9,9,10,.72)); max-width:min(300px, 78vw); padding:18px 20px; }
#scene-hombre .rec-title{ color:var(--white); text-shadow:0 2px 20px rgba(0,0,0,.5); font-size:clamp(17px, 2.1vw, 24px); margin-bottom:0; }
#scene-hombre .rec-copy{ color:var(--stone); text-shadow:0 1px 14px rgba(0,0,0,.45); }
#scene-hombre .scene-marker{ color:var(--titanium-1); }

/* ---- 07 CIERRE ---- */
#scene-cierre{ background:#0d0d0e; }
#scene-cierre .scene-photo{ background-position:center 38%; }
#scene-cierre.active .scene-photo,
#scene-cierre.leaving .scene-photo{ background-image:var(--photo-cierre); }
#scene-cierre .scene-photo-overlay{
  background:linear-gradient(90deg, rgba(8,8,9,.72) 0%, rgba(8,8,9,.42) 32%, rgba(8,8,9,.08) 52%, transparent 68%);
}
#scene-cierre .scene-inner{ align-items:flex-start; justify-content:flex-end; text-align:left; padding:0 0 15vh 6vw; }
#scene-cierre .scene-inner-cta-only .cta-final{ padding:15px 34px; font-size:11.5px; }
.cierre-line{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(19px,2.6vw,28px); line-height:1.7; color:var(--stone);
  max-width:640px; margin-bottom:5vh;
}
.cierre-mark{
  font-family:var(--font-display); font-weight:400; font-size:clamp(30px,4vw,44px);
  letter-spacing:.16em; color:var(--titanium-1); margin-bottom:6vh;
}
.cta-final{
  font-family:var(--font-body); font-weight:500; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--black);
  background:linear-gradient(135deg, var(--titanium-1), var(--white) 50%, var(--titanium-2));
  padding:18px 46px; border-radius:1px;
  text-decoration:none; display:inline-block;
  transition:transform 420ms var(--ease-scene), box-shadow 420ms ease;
}
.cta-final:hover, .cta-final:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}

/* ============================================================
   ACERO — HISTORIA / CÓDIGO
   ============================================================ */
#scene-historia, #scene-codigo{
  background-size:cover; background-position:center;
}
#scene-historia.active, #scene-historia.leaving,
#scene-codigo.active, #scene-codigo.leaving{
  background-image:radial-gradient(120% 90% at 50% 8%, rgba(60,61,64,.55) 0%, rgba(26,27,29,.92) 65%), var(--photo-ambient);
}
.editorial{ max-width:640px; }
.editorial .eyebrow{
  font-family:var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--titanium-3); margin-bottom:22px;
}
.editorial h2{
  font-family:var(--font-display); font-weight:400; font-size:clamp(24px,3.6vw,38px);
  line-height:1.32; color:var(--white); margin-bottom:8px;
}
.editorial-body{
  max-height:46vh; overflow-y:auto; padding:2px 4px 4px;
  text-align:left;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.editorial-body p{
  font-family:var(--font-body); font-weight:300; font-size:15px;
  line-height:1.9; color:var(--titanium-1); margin-bottom:18px;
}
.editorial-body p:last-child{ margin-bottom:0; }
.editorial .cap{ font-family:var(--font-display); font-style:italic; color:var(--stone); }
.editorial-values{
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--titanium-2); text-align:center; margin:8px 0 20px;
}
.editorial-close{
  font-family:var(--font-display); font-weight:400; font-size:16px;
  letter-spacing:.06em; color:var(--white); text-align:center; margin-top:6px;
}
.editorial-close .sub{ display:block; font-size:12px; letter-spacing:.14em; color:var(--titanium-3); margin-top:6px; }
.scene-actions{ display:flex; gap:44px; justify-content:center; margin-top:5vh; }
.scene-actions button{
  font-family:var(--font-display); font-size:15px; letter-spacing:.09em;
  color:var(--stone); padding:6px 2px; position:relative;
  transition:color 400ms;
}
.scene-actions button::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--titanium-1); transform:scaleX(0); transform-origin:left;
  transition:transform 420ms var(--ease-scene);
}
.scene-actions button:hover::after, .scene-actions button:focus-visible::after{ transform:scaleX(1); }

.codigo-list{
  list-style:none; display:flex; flex-direction:column; gap:20px; max-width:620px;
  margin:0 auto 4vh; text-align:left; max-height:52vh; overflow-y:auto; padding:2px 4px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.codigo-list li{ display:flex; gap:22px; align-items:baseline; }
.codigo-list .rn{ font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:.12em; color:var(--titanium-3); min-width:34px; }
.codigo-list .stmt{ font-family:var(--font-display); font-weight:400; font-size:clamp(15px,1.9vw,19px); color:var(--stone); line-height:1.5; }
.codigo-epigraph{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(14px,1.6vw,17px); line-height:1.7; color:var(--titanium-2);
  max-width:420px; margin:1vh auto 4vh; text-align:center;
}

/* ============================================================
   CATÁLOGO — CLOSET
   ============================================================ */
#scene-catalogo{
  background-size:cover; background-position:center 40%;
}
#scene-catalogo.active,
#scene-catalogo.leaving{
  background-image:var(--photo-closet-room);
}
#scene-catalogo::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 42%, rgba(20,20,22,.08) 0%, rgba(14,14,15,.38) 75%, rgba(10,10,11,.55) 100%);
}
.closet-stage{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; perspective:1400px; z-index:1; }
.closet-frame{
  position:relative; width:min(58vw,620px); height:min(78vh,640px);
  display:flex; align-items:flex-end; justify-content:center;
  transform-style:preserve-3d;
}
/* the jamb sits behind the door and stays put — this is what makes the swing read as a real door opening into a space, not a card flipping */
.closet-jamb{
  position:absolute; inset:-10px -10px -10px -10px;
  background:rgba(8,8,9,.4);
  box-shadow:inset 0 0 50px rgba(0,0,0,.5), 0 30px 90px rgba(0,0,0,.5);
}
.closet-door{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  border:1px solid rgba(255,255,255,.05);
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform 1600ms cubic-bezier(.34,.06,.24,1), box-shadow 1600ms ease;
  box-shadow:6px 30px 80px rgba(0,0,0,.55);
}
#scene-catalogo.active .closet-door,
#scene-catalogo.leaving .closet-door{ background-image:var(--photo-closet); }
.closet-door.open{ transform:rotateY(-108deg); }
.closet-lightgap{
  position:absolute; left:-2px; top:0; bottom:0; width:14px;
  background:linear-gradient(90deg, rgba(255,246,225,.9), rgba(255,246,225,0));
  opacity:0; transition:opacity 900ms ease 500ms;
}
.closet-door.open ~ .closet-lightgap{ opacity:.6; }
.hat-btn{ position:absolute; top:10%; left:50%; transform:translate(-50%,0); z-index:5; transition:opacity 700ms ease; }
.closet-door.open ~ .hat-btn{ opacity:0; pointer-events:none; }
.closet-inner-label{
  position:absolute; bottom:8%; left:50%; transform:translateX(-50%);
  font-family:var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:.22em;
  color:var(--titanium-3); text-transform:uppercase; opacity:.7;
}
.catalogo-title{
  position:absolute; top:14%; left:50%; transform:translateX(-50%);
  text-align:center; z-index:1;
}

.catalogo-grid-wrap{
  position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 900ms ease 500ms;
  overflow-y:auto; padding:14vh 6vw 8vh;
  background:radial-gradient(120% 90% at 50% 0%, rgba(38,39,42,.97) 0%, rgba(26,27,29,.99) 55%);
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.catalogo-grid-wrap.show{ opacity:1; pointer-events:auto; }
.catalogo-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:46px 42px; max-width:940px; width:100%;
}
.product-card{
  position:relative;
  padding:0 0 18px;
  text-align:left; background:rgba(199,201,202,.025);
  transition:transform 380ms ease;
}
.product-card::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(199,201,202,.14);
}
.product-card:hover{ transform:translateY(-3px); }
.product-swatch{
  position:relative; width:100%; aspect-ratio:1.45; margin-bottom:20px; overflow:hidden;
  background-image:var(--product-image, none), linear-gradient(135deg,#3c3d40,#a3a4a5 48%,#55565a);
  background-size:cover,100% 100%; background-position:center; background-repeat:no-repeat;
}
.product-swatch::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(100deg, rgba(255,255,255,.09) 0px, rgba(255,255,255,0) 2px, rgba(0,0,0,.07) 4px, rgba(0,0,0,0) 6px);
  mix-blend-mode:overlay;
}
.product-name{ font-family:var(--font-display); font-size:22px; color:var(--white); margin-bottom:9px; }
.product-desc{ font-family:var(--font-body); font-weight:300; font-size:13px; color:var(--titanium-2); line-height:1.7; margin-bottom:20px; }
.product-row{ display:flex; align-items:center; justify-content:space-between; }
.product-price{ font-family:var(--font-body); font-weight:500; font-size:13px; color:var(--titanium-1); }
.product-add{
  font-family:var(--font-body); font-weight:500; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--black); background:linear-gradient(120deg, var(--titanium-2), var(--white) 50%, var(--titanium-1)); padding:8px 14px;
  transition:background 300ms;
}
.product-add:hover{ background:var(--white); }
.closet-back{
  position:absolute; top:calc(28px + env(safe-area-inset-top, 0px)); right:calc(32px + env(safe-area-inset-right, 0px)); z-index:3;
  font-family:var(--font-body); font-weight:500; font-size:15px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--titanium-1); opacity:0; transition:opacity 600ms ease 900ms;
}
.catalogo-grid-wrap.show ~ .closet-back, .closet-back.show{ opacity:.85; }

@media (max-width:640px){
  .catalogo-grid{ grid-template-columns:1fr; gap:34px; }
  .product-swatch{ aspect-ratio:1.5; }
  .closet-back{ top:calc(24px + env(safe-area-inset-top, 0px)); right:calc(20px + env(safe-area-inset-right, 0px)); }
}
@media (max-width:640px){
  .scene-material-strip::before{ width:16px; min-width:16px; }
  #scene-interior .scene-inner,
  #scene-exterior .scene-inner{ padding-left:6vw; padding-right:6vw; padding-bottom:9vh; }
  #scene-comunidad .scene-inner{ padding-top:9vh; padding-left:6vw; padding-right:6vw; }
  .text-panel{ padding:18px 18px; gap:10px; }
  .rec-title{ font-size:clamp(24px,7vw,34px); }
  .rec-copy{ font-size:13px; line-height:1.75; }
  .hero-wall-titanium{ flex-basis:64%; }
  .hero-wall-concrete{ flex-basis:36%; }
}

/* ============================================================
   TITANIUM ARCANUM — ADDITIVE MODULE
   Everything below this line is new. Nothing above it was modified
   to build Arcanum — it only reads existing tokens (--titanium-*,
   --graphite-*, --font-display, --font-body, --ease-scene, etc.)
   ============================================================ */

/* hero entry — quiet 4th option, deliberately lower hierarchy */
.entry-arcanum{
  position:absolute; left:50%; bottom:calc(6vh + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%);
  font-family:var(--font-body); font-weight:500; font-size:12px;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--titanium-1); opacity:.9;
  padding:10px 20px; display:inline-flex; align-items:center; gap:10px;
  background:rgba(6,6,7,.55);
  transition:opacity 500ms ease, color 500ms ease, letter-spacing 500ms ease, background 500ms ease;
  z-index:2;
}
.entry-arcanum::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:currentColor; opacity:.9;
}
.entry-arcanum:hover, .entry-arcanum:focus-visible{
  opacity:1; color:#fff; letter-spacing:.4em; background:rgba(6,6,7,.75);
}
@media (max-width:640px){ .entry-arcanum{ bottom:calc(4vh + env(safe-area-inset-bottom, 0px)); } }

/* ---- Door scene ---- */
#scene-arcanum-door{
  background-color:#09090a;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  overflow:hidden;
}
#scene-arcanum-door.active,
#scene-arcanum-door.leaving{
  background-image:
    linear-gradient(180deg, rgba(14,15,17,.22), rgba(8,9,11,.58)),
    url("../assets/arcanum/FONDO PUERTA ARCANUM.webp");
}
.arcanum-door-inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6vh; }
.arcanum-plate-wrap{
  position:relative; z-index:1;
  width:min(76vw, 740px); aspect-ratio:1200/720;
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  filter:drop-shadow(0 20px 32px rgba(0,0,0,.54)) saturate(.76) brightness(.85);
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity 1400ms var(--ease-scene), transform 1400ms var(--ease-scene);
}
.scene.active .arcanum-plate-wrap{ opacity:1; transform:translateY(0) scale(1.08); }
.arcanum-plate-img{
  width:100%; height:100%;
  background-size:cover, contain; background-repeat:no-repeat, no-repeat; background-position:center, center;
  border-radius:0;
  box-shadow:inset 0 0 0 1px rgba(42,44,46,.82);
  filter:saturate(.72) brightness(.84) contrast(1.04);
}
#scene-arcanum-door.active .arcanum-plate-img,
#scene-arcanum-door.leaving .arcanum-plate-img{
  background-image:
    linear-gradient(180deg, rgba(18,19,20,.14), rgba(18,19,20,.12)),
    var(--photo-arcanum-plate);
}

.arcanum-dial-group{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  opacity:0; transition:opacity 1400ms ease 500ms;
}
.scene.active .arcanum-dial-group{ opacity:1; }
.arcanum-dial{
  position:relative; width:min(78vw, 320px); height:64px;
  overflow:hidden; touch-action:pan-y; cursor:grab; user-select:none;
  background:linear-gradient(180deg, #1a1a1b, #0c0c0d);
  border-top:1px solid rgba(199,201,202,.18); border-bottom:1px solid rgba(199,201,202,.18);
}
.arcanum-dial:active{ cursor:grabbing; }
.arcanum-dial-track{
  position:absolute; top:0; left:50%; height:100%; display:flex; will-change:transform;
}
.arcanum-dial-cell{
  width:56px; height:64px; flex:0 0 56px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:26px; letter-spacing:.02em;
  color:var(--titanium-4); transition:color 300ms ease;
}
.arcanum-dial-cell.is-letter{ color:var(--titanium-2); font-weight:500; }
.arcanum-dial.is-aligned .arcanum-dial-cell.is-letter{ color:#fff; }
.arcanum-dial-marker{
  position:absolute; top:-6px; bottom:-6px; left:50%; width:1px; transform:translateX(-50%);
  background:var(--titanium-2); box-shadow:0 0 10px 1px rgba(199,201,202,.4);
  pointer-events:none; transition:background 300ms ease, box-shadow 300ms ease;
}
.arcanum-dial.is-aligned .arcanum-dial-marker{ background:#fff; box-shadow:0 0 16px 3px rgba(255,255,255,.75); }
.arcanum-dial-hint{
  font-family:var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--titanium-4);
}
.arcanum-flash{
  position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:600;
}
.arcanum-flash.fire{ animation:arcanum-flash-anim 550ms ease-out; }
@keyframes arcanum-flash-anim{ 0%{opacity:0;} 12%{opacity:.9;} 100%{opacity:0;} }

/* ---- Reveal scene ---- */
#scene-arcanum-reveal{
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
#scene-arcanum-reveal.active,
#scene-arcanum-reveal.leaving{
  background-image:linear-gradient(rgba(5,5,6,.46), rgba(5,5,6,.46)), url("../assets/arcanum/ESCALERA ARCANUM.webp");
}
.arcanum-reveal-line{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(20px,3vw,34px); line-height:1.6; color:var(--stone);
  max-width:640px; text-align:center;
  opacity:0; transform:translateY(8px);
  transition:opacity 1800ms ease, transform 1800ms var(--ease-scene);
}
.scene.active .arcanum-reveal-line{ opacity:1; transform:translateY(0); }
.arcanum-reveal-mark{
  margin-top:7vh;
  font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.4vw,40px);
  letter-spacing:.2em; color:var(--titanium-1);
  opacity:0; transition:opacity 1800ms ease 1400ms;
}
.scene.active .arcanum-reveal-mark{ opacity:1; }
.arcanum-reveal-sub{
  margin-top:14px;
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--titanium-1);
  opacity:0; transition:opacity 1800ms ease 2000ms;
  cursor:pointer; padding:8px;
}
.scene.active .arcanum-reveal-sub{ opacity:1; }
.arcanum-reveal-sub:hover{ opacity:1; color:var(--white); }

/* ---- Arcanum 001 scene ---- */
#scene-arcanum-001{
  background-size: cover, cover, auto, auto;
  background-position: center, center, 0 0, 50% 10%;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#scene-arcanum-001.active,
#scene-arcanum-001.leaving{
  background-image:
    linear-gradient(rgba(0,0,0,.43), rgba(0,0,0,.43)),
    var(--arcanum-reader-bg-image),
    repeating-linear-gradient(100deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,0) 1px, rgba(0,0,0,.09) 2px, rgba(0,0,0,0) 3px),
    radial-gradient(120% 100% at 50% 10%, var(--arcanum-reader-bg-1) 0%, var(--arcanum-reader-bg-2) 70%);
}
#scene-arcanum-001 .scene-inner{ padding:12vh 6vw 8vh; }
.arcanum001-wrap{ max-width:760px; width:100%; text-align:center; }
.arcanum001-eyebrow{ font-family:var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--white); margin-bottom:22px; }
.arcanum001-cover{
  width:190px; aspect-ratio:1414/2000; margin:0 auto 30px;
  border:1px solid rgba(199,201,202,.18);
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  overflow:hidden;
}
.arcanum001-cover-img{
  width:100%; height:100%;
  background-size:cover; background-position:center;
}
#scene-arcanum-001.active .arcanum001-cover-img,
#scene-arcanum-001.leaving .arcanum001-cover-img{
  background-image:var(--photo-arcanum-cover);
}
.arcanum001-title{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.6vw,40px); color:var(--white); margin-bottom:14px; }
.arcanum001-desc{ font-family:var(--font-display); font-style:italic; font-weight:300; font-size:15.5px; line-height:1.85; color:var(--titanium-1); max-width:480px; margin:0 auto 5vh; }
.arcanum001-read-btn{
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--black); background:linear-gradient(120deg, var(--titanium-2), var(--white) 50%, var(--titanium-1));
  padding:15px 38px; display:inline-block; transition:transform 400ms var(--ease-scene);
}
.arcanum001-read-btn:hover{ transform:translateY(-2px); }

.arcanum-reader{ display:none; max-width:420px; margin:6vh auto 0; text-align:left; touch-action:pan-y pinch-zoom; }
.arcanum-reader.show{ display:block; }
.arcanum-reader-page{ margin-bottom:22px; transition:opacity 100ms ease, transform 100ms ease; }
.arcanum-reader-page.is-changing-next{ opacity:0; transform:translateX(-8px); }
.arcanum-reader-page.is-changing-prev{ opacity:0; transform:translateX(8px); }
@media (prefers-reduced-motion: reduce){
  .arcanum-reader-page{ transition:none; }
}
.arcanum-page-frame{
  width:100%; aspect-ratio:1414/2000; background:#0c0c0d;
  border:1px solid rgba(199,201,202,.16);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.arcanum-page-img{ width:100%; height:100%; object-fit:contain; display:block; }
.arcanum-page-missing-label{
  font-family:var(--font-body); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--titanium-4); text-align:center; padding:20px;
}
.arcanum-reader-nav{ display:flex; align-items:center; justify-content:space-between; }
.arcanum-reader-nav button{
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--titanium-2); padding:8px 4px; transition:color 300ms ease;
}
.arcanum-reader-nav button:hover:not(:disabled){ color:var(--white); }
.arcanum-reader-nav button:disabled{ opacity:.3; cursor:default; }
.arcanum-reader-progress{ font-family:var(--font-body); font-size:10px; letter-spacing:.2em; color:var(--titanium-1); }

.arcanum-cta-block{ display:none; margin-top:6vh; }
.arcanum-cta-block.show{ display:block; }
.arcanum-cta-q{ font-family:var(--font-display); font-size:clamp(19px,2.4vw,26px); color:var(--white); margin-bottom:10px; }
.arcanum-cta-sub{ font-family:var(--font-body); font-weight:300; font-size:13.5px; color:var(--titanium-2); margin-bottom:26px; }
.arcanum-cta-primary{
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--black); background:linear-gradient(120deg, var(--titanium-2), var(--white) 50%, var(--titanium-1));
  padding:15px 38px; display:inline-block; transition:transform 400ms var(--ease-scene);
}
.arcanum-cta-primary:hover{ transform:translateY(-2px); }
.arcanum-cta-secondary{
  display:block; margin:22px auto 0; font-family:var(--font-body); font-weight:400; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--white); opacity:.7;
}
.arcanum-cta-secondary:hover{ opacity:1; color:var(--titanium-2); }

.arcanum-form{ display:none; max-width:360px; margin:26px auto 0; flex-direction:column; gap: 25px; }
.arcanum-form.show{ display:flex; }
.arcanum-form-field{ display:flex; flex-direction:column; gap:6px; }
.arcanum-form-label{
  font-family:var(--font-body); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--titanium-2); text-align:center;
}
.arcanum-form input{
  background:transparent; border:none; border-bottom:1px solid rgba(199,201,202,.3);
  color:var(--white); font-family:var(--font-body); font-size:14px; padding:10px 4px;
  text-align:center; transition:border-color 300ms ease;
}
.arcanum-form input::placeholder{ color:rgba(199,201,202,.82); }
.arcanum-form input:focus{ outline:none; border-bottom-color:var(--titanium-1); }
.arcanum-form-submit{
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--black); background:var(--titanium-1); padding:13px 30px; margin-top:6px;
  transition:background 300ms ease;
}
.arcanum-form-submit:hover{ background:var(--white); }
.arcanum-confirm{ display:none; font-family:var(--font-body); font-size:11.5px; letter-spacing:.05em; color:var(--titanium-2); margin-top:18px; }
.arcanum-confirm.show{ display:block; }

@media (prefers-reduced-motion: reduce){
  .arcanum-plate-wrap, .arcanum-dial-group, .arcanum-reveal-line,
  .arcanum-reveal-mark, .arcanum-reveal-sub{ transition-duration:200ms !important; }
}