/* Outer Enigma — estils compartits dels capítols. Fora de Webflow (no es re-exporta). */
:root{
  --bg:#161325; --panel:#1d1933; --ink:#ECEAFB; --muted:#9a93c9;
  --accent:#7c5cff; --accent2:#4f26e9; --line:#2c2746;
}
*{box-sizing:border-box;}
body.enigma{
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:'Outfit','Nunito',system-ui,sans-serif;
  display:flex; align-items:center; justify-content:center; padding:32px 18px;
}
.o33-stage{width:100%; max-width:620px; text-align:center;}
.o33-panel{
  background:linear-gradient(180deg,#221d3b,#191530);
  border:1px solid var(--line); border-radius:24px; padding:38px 34px;
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}
.o33-sign{font-family:'Varela Round','Varela',sans-serif; letter-spacing:2px; color:var(--accent); font-size:20px; opacity:.85;}
.o33-kicker{margin:14px 0 0; text-transform:uppercase; letter-spacing:4px; font-size:12px; color:var(--muted);}
.o33-title{margin:6px 0 14px; font-size:30px; line-height:1.15; font-weight:700;}
.o33-intro{margin:0 auto 26px; max-width:46ch; color:var(--muted); line-height:1.55; font-size:15px;}

.cipher-wrap{position:relative; display:inline-block; margin:6px auto 22px; border-radius:14px; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none;}
.cipher-sharp{
  padding:26px 30px; font-family:'Courier New',monospace; font-weight:700;
  font-size:clamp(26px,7vw,46px); letter-spacing:.32em; color:#fff;
  background:#120f24; text-indent:.16em;
}
.cipher-static{display:inline-block; border-radius:14px; margin:6px auto 22px;}
.cipher-coords{font-family:'Courier New',monospace; font-size:clamp(16px,3.4vw,22px); letter-spacing:.06em; line-height:1.7; max-width:520px; padding:20px 24px;}
.poly-grid{display:inline-block; margin:0 auto 20px; font-family:'Courier New',monospace; font-size:17px; line-height:1.55; color:#cfc8ff; background:#120f24; border:1px solid var(--line); border-radius:12px; padding:14px 22px; white-space:pre;}
.cipher-cover{
  position:absolute; inset:0; background:rgba(18,15,36,.93);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); cursor:none;
  -webkit-mask:radial-gradient(circle 60px at var(--mx,-300px) var(--my,-300px), transparent 0 54px, #000 62px);
          mask:radial-gradient(circle 60px at var(--mx,-300px) var(--my,-300px), transparent 0 54px, #000 62px);
}
.cipher-cover::after{
  content:'arrossega la lupa'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; letter-spacing:2px; color:var(--muted); text-transform:uppercase;
}
.lens{
  position:absolute; width:120px; height:120px; margin:-60px 0 0 -60px;
  border:2px solid var(--accent); border-radius:50%; pointer-events:none; opacity:0;
  box-shadow:0 0 24px rgba(124,92,255,.5);
}

.o33-rule{font-style:italic; color:#cfc8ff; margin:0 0 24px; font-size:16px;}
.o33-form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.o33-input{
  flex:1 1 260px; max-width:340px; padding:13px 16px; border-radius:12px;
  border:1px solid var(--line); background:#120f24; color:#fff; font-size:15px; font-family:inherit;
}
.o33-input:focus{outline:none; border-color:var(--accent);}
.o33-input.shake{animation:shake .35s;}
@keyframes shake{10%,90%{transform:translateX(-2px);}30%,70%{transform:translateX(5px);}50%{transform:translateX(-7px);}}
.o33-btn{
  padding:13px 22px; border:none; border-radius:12px; cursor:pointer;
  background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#fff;
  font-weight:700; font-size:15px; font-family:inherit;
}
.o33-btn:hover{filter:brightness(1.08);}
.o33-hint{min-height:20px; margin:14px 0 0; color:var(--muted); font-size:14px; letter-spacing:1px;}

.o33-reveal{margin-top:18px; border-top:1px solid var(--line); padding-top:22px;}
.o33-solved{color:var(--accent); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin:0 0 8px;}
.o33-artefact{font-size:18px; margin:0 0 14px;}
.o33-artefact b{color:#fff; background:rgba(124,92,255,.18); padding:2px 8px; border-radius:6px;}
.o33-seal{margin:0 0 10px;}
.o33-gateway{cursor:pointer;}
.o33-gateway:hover img{filter:drop-shadow(0 0 16px rgba(232,183,48,.7));}
.o33-seal img{filter:drop-shadow(0 8px 20px rgba(0,0,0,.5));}
.o33-seal figcaption{color:var(--muted); font-size:13px; margin-top:4px;}
.o33-next{color:var(--muted); font-size:14px;}
.o33-link{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(124,92,255,.45); font-weight:600;}
.o33-link:hover{color:#a78bff;}
.o33-keyword{font-size:16px; margin:0 0 14px; color:#cfc8ff;}
.o33-keyword b{font-family:'Courier New',monospace; letter-spacing:3px; color:#fff; background:rgba(124,92,255,.18); padding:2px 10px; border-radius:6px;}
.o33-foot{margin:22px 0 0; color:#564f7e; letter-spacing:3px; font-size:12px; text-transform:uppercase;}
.o33-seq{margin:24px 0 2px; font-family:'Courier New',monospace; font-size:13px; letter-spacing:3px; color:#5b5580; user-select:text;}

@media (max-width:520px){
  .o33-panel{padding:28px 20px;}
  .o33-title{font-size:24px;}
}