/* =========================================================
   THE MASTERY 2026 — ATTESTATI
   Palette, font e componenti ripresi da info.themastery2026.com
   ========================================================= */

:root{
  --bg-0:#06051a;
  --bg-1:#0c0a2e;
  --violet:#8b5cf6;
  --violet-hi:#b9a2ff;
  --blue:#4f6df5;
  --gold-hi:#f3dca6;
  --gold:#d4b06a;
  --glass:rgba(255,255,255,0.05);
  --glass-hi:rgba(255,255,255,0.085);
  --line:rgba(255,255,255,0.10);
  --text-0:#f6f4ff;
  --text-1:#b7b2d6;
  --text-2:#7c77a0;
  --danger:#ff8a9a;
  --radius:22px;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{
  background:var(--bg-0); color:var(--text-0);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100%;
}
a{ color:inherit; }
button, input, select, textarea{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }
[hidden]{ display:none !important; }

/* ---------- sfondo: luci da palco ---------- */
.stage{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 45% at 50% -8%, rgba(139,92,246,0.42), transparent 62%),
    radial-gradient(ellipse 60% 40% at 0% 30%, rgba(79,109,245,0.22), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 34%, rgba(139,92,246,0.20), transparent 60%),
    radial-gradient(ellipse 80% 30% at 50% 108%, rgba(124,58,237,0.32), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 55%);
}
.beam{
  position:absolute; top:-12%; width:120px; height:85vh;
  background:linear-gradient(180deg, rgba(167,139,250,0.30), rgba(79,109,245,0.08) 55%, transparent);
  filter:blur(18px); transform-origin:top center;
  animation:sway 14s ease-in-out infinite alternate;
}
.beam.b1{ left:6%;  transform:rotate(-24deg); }
.beam.b2{ left:30%; transform:rotate(-9deg);  opacity:.55; animation-delay:-4s; }
.beam.b3{ right:30%; transform:rotate(9deg);  opacity:.55; animation-delay:-8s; }
.beam.b4{ right:6%; transform:rotate(24deg);  animation-delay:-2s; }
@keyframes sway{ from{ translate:0 0; } to{ translate:14px 0; } }
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.04;
  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.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page{
  position:relative; z-index:2; max-width:520px; margin:0 auto;
  padding:calc(38px + env(safe-area-inset-top)) 16px calc(56px + env(safe-area-inset-bottom));
}

/* ---------- header ---------- */
.meta{
  text-align:center; font-family:'Montserrat',sans-serif; font-weight:600;
  font-size:10.5px; letter-spacing:0.34em; text-transform:uppercase; color:var(--gold-hi);
}
.meta span{ color:var(--text-1); font-weight:500; }
.logo{ margin:26px auto 0; text-align:center; }
.logo img{
  display:block; width:min(62%, 230px); height:auto; margin:0 auto;
  filter:drop-shadow(0 8px 30px rgba(139,92,246,0.6));
}
.horizon{
  height:2px; margin:24px auto 0; width:86%; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--violet) 25%, #e9ddff 50%, var(--violet) 75%, transparent);
  box-shadow:0 0 18px 2px rgba(139,92,246,0.75), 0 0 46px 6px rgba(124,58,237,0.35);
}
.hero{ text-align:center; margin-top:22px; }
.hero .kicker{
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:10.5px;
  letter-spacing:0.3em; text-transform:uppercase;
  background:linear-gradient(90deg, #8b5cf6, #c4b5fd 50%, #8b5cf6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h1{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:26px; line-height:1.2;
  letter-spacing:0.01em; margin-top:10px; text-wrap:balance;
}
.hero p{ font-size:14px; line-height:1.6; color:var(--text-1); margin:10px auto 0; max-width:420px; text-wrap:pretty; }

/* ---------- sezioni ---------- */
.section{ margin-top:34px; }
.section-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.lbl{
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:10.5px;
  letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); white-space:nowrap;
}
.lbl .num{ color:var(--text-2); font-weight:500; margin-right:8px; }
.rule{ flex:1; height:1px; background:linear-gradient(90deg, rgba(212,176,106,0.5), transparent); }
.stack{ display:flex; flex-direction:column; gap:12px; }

/* ---------- selettore lingua (3 opzioni) ---------- */
.langsel{
  position:relative; display:flex; width:100%; max-width:330px; margin:0 auto; padding:4px; border-radius:999px;
  background:linear-gradient(180deg, var(--glass-hi), var(--glass));
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 10px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 1px rgba(212,176,106,0.35);
}
.langsel .pill{
  position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / 3); border-radius:999px;
  background:linear-gradient(135deg, #7c3aed, #5b21b6);
  box-shadow:0 4px 16px rgba(124,58,237,0.55), inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 1px rgba(243,220,166,0.55);
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
body[data-lang="en"] .langsel .pill{ transform:translateX(100%); }
body[data-lang="es"] .langsel .pill{ transform:translateX(200%); }
.langsel button{
  position:relative; z-index:1; flex:1; padding:11px 0; border-radius:999px;
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text-2); transition:color .2s;
}
.langsel button[aria-checked="true"]{ color:#fff; }
.langsel button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.hint-center{ text-align:center; font-size:12px; color:var(--text-2); margin-top:10px; }

/* ---------- card con cornice oro ---------- */
.card{
  position:relative; width:100%; padding:18px 16px; border-radius:var(--radius);
  background:linear-gradient(180deg, var(--glass-hi), var(--glass));
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 12px 34px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.10);
}
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(243,220,166,0.85), rgba(212,176,106,0.18) 38%, rgba(139,92,246,0.22) 70%, rgba(243,220,166,0.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.card.invalid::before{ background:linear-gradient(140deg, var(--danger), rgba(255,138,154,0.35)); }
.card > *{ position:relative; }

/* ---------- campi ---------- */
.field + .field{ margin-top:18px; }
.q-label, .field label.f-label{
  display:block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:15px; line-height:1.4;
}
.req{ color:var(--gold); margin-left:3px; }
.f-help{ font-size:12.5px; line-height:1.5; color:var(--text-2); margin-top:5px; }
.f-error{ font-size:12.5px; color:var(--danger); margin-top:8px; display:none; }
.invalid .f-error{ display:block; }

.input{
  display:block; width:100%; margin-top:10px; padding:13px 14px; border-radius:14px;
  background:rgba(6,5,26,0.55); border:1px solid var(--line); color:var(--text-0);
  font-size:16px; line-height:1.4; outline:none; transition:border-color .2s, box-shadow .2s;
  -webkit-appearance:none; appearance:none;
}
.input::placeholder{ color:var(--text-2); }
.input:focus{ border-color:rgba(212,176,106,0.7); box-shadow:0 0 0 3px rgba(212,176,106,0.15); }
.invalid .input{ border-color:rgba(255,138,154,0.6); }
textarea.input{ min-height:110px; resize:vertical; }
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4b06a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:42px;
}
select.input option{ background:#110d33; color:var(--text-0); }

/* opzioni radio / checkbox */
.opts{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.opt{ position:relative; display:block; cursor:pointer; }
.opt input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.opt span{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
  background:rgba(6,5,26,0.45); border:1px solid var(--line);
  font-size:14.5px; line-height:1.4; color:var(--text-1); transition:all .18s;
}
.opt span::before{
  content:''; flex:none; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--text-2); transition:all .18s;
}
.opt.check span::before{ border-radius:6px; }
.opt input:checked + span{
  color:var(--text-0); border-color:rgba(212,176,106,0.6);
  background:linear-gradient(120deg, rgba(139,92,246,0.22), rgba(79,109,245,0.10));
}
.opt input:checked + span::before{
  border-color:var(--gold); background:radial-gradient(circle, var(--gold-hi) 0 4px, transparent 5px);
}
.opt.check input:checked + span::before{
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1306' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.opt input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }

/* scala numerica */
.scale{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; margin-top:12px; }
.scale .opt span{
  justify-content:center; padding:12px 0; font-family:'Montserrat',sans-serif; font-weight:700; font-size:15px;
}
.scale .opt span::before{ display:none; }
.scale .opt input:checked + span{
  color:#1a1306; border-color:transparent; background:linear-gradient(135deg, var(--gold-hi), var(--gold));
}
.scale-ends{ display:flex; justify-content:space-between; gap:12px; margin-top:8px; font-size:11.5px; color:var(--text-2); }

/* consenso */
.consent{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.consent input{ position:absolute; opacity:0; width:1px; height:1px; }
.consent .box{
  flex:none; width:20px; height:20px; margin-top:1px; border-radius:6px; border:1.5px solid var(--text-2); transition:all .18s;
}
.consent input:checked + .box{
  border-color:var(--gold);
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1306' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;
}
.consent input:focus-visible + .box{ outline:2px solid var(--gold); outline-offset:2px; }
.consent .txt{ font-size:13px; line-height:1.55; color:var(--text-1); }
.consent .txt a{ color:var(--gold-hi); text-underline-offset:3px; }

/* ---------- invio ---------- */
.submit-wrap{ margin-top:26px; }
.form-alert{
  display:none; margin-bottom:14px; padding:12px 14px; border-radius:14px; font-size:13.5px; line-height:1.5;
  color:#ffd5db; background:rgba(255,138,154,0.10); border:1px solid rgba(255,138,154,0.4);
}
.form-alert.show{ display:block; }
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; letter-spacing:0.04em;
  padding:17px 18px; border-radius:16px; cursor:pointer; transition:transform .15s, opacity .2s;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn.primary{
  color:#1a1306; background:linear-gradient(135deg, var(--gold-hi), var(--gold));
  box-shadow:0 10px 26px rgba(212,176,106,0.28), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn.ghost{ color:var(--gold-hi); border:1px solid rgba(212,176,106,0.45); background:rgba(212,176,106,0.06); }
.btn:active{ transform:scale(0.985); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.btn[disabled]{ opacity:.75; cursor:progress; }
.spinner{
  width:17px; height:17px; border-radius:50%; border:2px solid rgba(26,19,6,0.25); border-top-color:#1a1306;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- conferma ---------- */
.done{ margin-top:34px; text-align:center; padding:30px 20px 22px; }
.done .seal{
  width:64px; height:64px; margin:0 auto; border-radius:50%; display:grid; place-items:center; color:#1a1306;
  background:linear-gradient(135deg, var(--gold-hi), var(--gold));
  box-shadow:0 10px 30px rgba(212,176,106,0.35), 0 0 0 6px rgba(212,176,106,0.12);
}
.done .seal svg{ width:30px; height:30px; }
.done .kicker{
  margin-top:18px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:10.5px;
  letter-spacing:0.3em; text-transform:uppercase; color:var(--gold);
}
.done h2{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:22px; margin-top:8px; }
.done .who{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:15px; color:var(--violet-hi); margin-top:6px; }
.done p{ font-size:13.5px; line-height:1.6; color:var(--text-1); margin:12px auto 22px; max-width:360px; }

footer{
  margin-top:42px; text-align:center; font-family:'Montserrat',sans-serif; font-weight:500;
  font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:var(--text-2);
}
.debug-badge{
  position:fixed; top:10px; right:10px; z-index:50; padding:6px 10px; border-radius:8px;
  font:600 11px/1 'Montserrat',sans-serif; letter-spacing:.08em; color:#1a1306; background:#ffb4c0;
}

.reveal{ opacity:0; transform:translateY(10px); animation:rise .55s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }

@media (min-width:600px){
  .hero h1{ font-size:30px; }
  .card{ padding:22px 20px; }
}
@media (max-width:360px){
  .scale .opt span{ font-size:14px; padding:11px 0; }
}
@media (prefers-reduced-motion: reduce){
  .beam, .spinner{ animation:none; }
  .reveal{ animation:none !important; opacity:1 !important; transform:none !important; }
  .langsel .pill{ transition:none; }
}