/* ============================================================
   LUCANIA IS MORE — Pagina "Proponi una voce"
   Direction: TERRA (baked in). Builds on styles.css.
   ============================================================ */

:root{
  --cream:#FFF9E3;  --cream-2:#F4ECCF;
  --ink:#1C1C1C;
  --ink-70:rgba(28,28,28,.72); --ink-55:rgba(28,28,28,.55); --ink-40:rgba(28,28,28,.40);
  --red:#A91013;    --green:#575D46;  --gold:#F4A200;
  --line:rgba(28,28,28,.16); --line-strong:rgba(28,28,28,.38);
  --field:rgba(255,249,227,.7);
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Outfit", system-ui, -apple-system, sans-serif;
}

/* ============================================================
   HERO — intro
   ============================================================ */
.pr-hero{ position:relative; padding:calc(78px + 60px) 0 50px; overflow:hidden;
  border-bottom:1px solid var(--line-strong); }
.pr-hero .wm{ position:absolute; right:1%; top:50%; transform:translateY(-50%);
  font-family:var(--serif); font-weight:700; font-size:min(40vw,520px); line-height:1;
  color:rgba(28,28,28,.05); user-select:none; pointer-events:none; z-index:1; }
.pr-hero .shell{ position:relative; z-index:2; }
.pr-back{ display:flex; width:max-content; align-items:center; gap:9px; color:var(--ink-55);
  font:600 11.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  padding-bottom:5px; border-bottom:1px solid var(--line-strong); transition:.18s;
  margin-bottom:34px; }
.pr-back:hover{ color:var(--red); gap:14px; }
.pr-kick{ display:inline-flex; align-items:center; gap:12px; color:var(--red);
  font:600 11.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.pr-kick::before{ content:""; width:28px; height:1px; background:var(--red); }
.pr-hero h1{ font-family:var(--sans); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(44px,6.4vw,92px); line-height:.96; margin:20px 0 0; color:var(--ink);
  max-width:16ch; text-wrap:balance; }
.pr-hero .lede{ font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:var(--ink-70);
  max-width:56ch; margin:26px 0 0; text-wrap:pretty; }

/* ============================================================
   LAYOUT — form + aside editoriale
   ============================================================ */
.pr-body{ padding:70px 0 40px; }
.pr-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:72px;
  align-items:start; }

/* ---- FORM ---- */
.pr-form{ display:flex; flex-direction:column; gap:30px; }
.pr-step{ display:flex; align-items:center; gap:14px; margin:0 0 4px; color:var(--red);
  font:600 12px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.pr-step .n{ width:26px; height:26px; flex:0 0 26px; border-radius:50%;
  border:1px solid var(--line-strong); display:grid; place-items:center; color:var(--ink);
  font-size:11px; }
.pr-step::after{ content:""; flex:1; height:1px; background:var(--line); }

.pr-field{ display:flex; flex-direction:column; gap:9px; }
.pr-field > label{ font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-55); }
.pr-field label .opt{ text-transform:none; letter-spacing:0; color:var(--ink-40);
  font-weight:500; margin-left:6px; }
.pr-field input, .pr-field textarea, .pr-field select{ font-family:var(--sans); font-size:16px;
  color:var(--ink); background:var(--field); border:1px solid var(--line-strong);
  border-radius:13px; padding:15px 16px; outline:none; transition:border-color .18s, box-shadow .18s;
  width:100%; }
.pr-field input::placeholder, .pr-field textarea::placeholder{ color:var(--ink-40); }
.pr-field input:focus, .pr-field textarea:focus, .pr-field select:focus{
  border-color:var(--red); box-shadow:0 0 0 3px rgba(169,16,19,.12); }
.pr-field textarea{ resize:vertical; min-height:108px; line-height:1.55; }
.pr-field .help{ color:var(--ink-40); font-size:12.5px; line-height:1.5; }
.pr-row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* segmented · tipo di voce */
.pr-seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pr-seg label{ cursor:pointer; }
.pr-seg input{ position:absolute; opacity:0; pointer-events:none; }
.pr-seg .opt{ display:flex; flex-direction:column; gap:6px; padding:18px 18px 16px;
  border:1px solid var(--line-strong); border-radius:15px; background:var(--field);
  transition:.16s; height:100%; }
.pr-seg .opt .t{ font-family:var(--sans); font-weight:600; font-size:19px; color:var(--ink);
  letter-spacing:-.01em; }
.pr-seg .opt .d{ font:500 12.5px/1.4 var(--sans); color:var(--ink-55); }
.pr-seg label:hover .opt{ border-color:var(--ink); }
.pr-seg input:checked + .opt{ border-color:var(--red); background:rgba(169,16,19,.07);
  box-shadow:0 0 0 1px var(--red) inset; }
.pr-seg input:focus-visible + .opt{ box-shadow:0 0 0 3px rgba(169,16,19,.18); }

/* conditional fields (solo per "parola") */
.pr-only-parola{ display:none; }
.pr-form[data-type="parola"] .pr-only-parola{ display:flex; }
.pr-form[data-type="parola"] .pr-row2.pr-only-parola{ display:grid; }

/* dynamic labels by type */
.pr-form .lbl-modo, .pr-form .lbl-proverbio{ display:none; }
.pr-form[data-type="modo"] .lbl-parola,
.pr-form[data-type="proverbio"] .lbl-parola{ display:none; }
.pr-form[data-type="modo"] .lbl-modo{ display:inline; }
.pr-form[data-type="proverbio"] .lbl-proverbio{ display:inline; }

/* submit */
.pr-submit{ display:inline-flex; align-items:center; gap:13px; cursor:pointer;
  align-self:flex-start; background:var(--red); border:0; border-radius:100px; color:#fff;
  font:600 13px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  padding:0 30px; height:58px; margin-top:6px; transition:.18s;
  box-shadow:0 12px 26px -10px rgba(169,16,19,.8); }
.pr-submit:hover{ transform:translateY(-2px); filter:brightness(.97);
  box-shadow:0 16px 30px -10px rgba(169,16,19,.9); }
.pr-submit .arr{ font-size:16px; line-height:0; }
.pr-fine{ color:var(--ink-40); font-size:12.5px; line-height:1.55; margin:0; max-width:52ch; }

/* ---- ASIDE editoriale ---- */
.pr-aside{ position:sticky; top:104px; display:flex; flex-direction:column; gap:34px; }
.pr-card{ border:1px solid var(--line); border-radius:20px; background:rgba(255,249,227,.5);
  padding:30px 30px 32px; }
.pr-card h3{ font-family:var(--sans); font-weight:700; font-size:22px; letter-spacing:-.01em;
  margin:0 0 22px; color:var(--ink); }
.pr-how{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.pr-how li{ display:grid; grid-template-columns:auto 1fr; gap:16px; padding:0 0 22px;
  position:relative; }
.pr-how li:last-child{ padding-bottom:0; }
.pr-how .dot{ width:30px; height:30px; flex:0 0 30px; border-radius:50%; background:var(--red);
  color:#fff; display:grid; place-items:center; font:700 13px/1 var(--sans); }
.pr-how li:not(:last-child)::before{ content:""; position:absolute; left:14.5px; top:32px;
  bottom:6px; width:1px; background:var(--line-strong); }
.pr-how .tx b{ display:block; font-family:var(--sans); font-weight:600; font-size:15px;
  color:var(--ink); margin-bottom:5px; }
.pr-how .tx span{ color:var(--ink-55); font-size:14px; line-height:1.5; }

.pr-tips{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.pr-tips li{ display:grid; grid-template-columns:auto 1fr; gap:12px; color:var(--ink-70);
  font-size:14.5px; line-height:1.5; }
.pr-tips .ck{ color:var(--green); font-weight:700; }
.pr-card.green{ background:var(--green); border-color:var(--green); color:#FFF9E3; }
.pr-card.green h3{ color:#FFF9E3; }
.pr-card.green .pr-tips li{ color:rgba(255,249,227,.82); }
.pr-card.green .pr-tips .ck{ color:var(--gold); }

/* ============================================================
   THANK-YOU state
   ============================================================ */
.pr-thanks{ display:none; }
.pr-body.done .pr-grid{ display:none; }
.pr-body.done .pr-thanks{ display:block; }
.pr-thanks{ max-width:680px; margin:0 auto; text-align:center; padding:40px 0 60px; }
.pr-thanks .tick{ width:74px; height:74px; border-radius:50%; background:var(--green);
  display:grid; place-items:center; margin:0 auto 28px; }
.pr-thanks .tick svg{ width:34px; height:34px; stroke:#FFF9E3; stroke-width:2.4; fill:none; }
.pr-thanks h2{ font-family:var(--sans); font-weight:800; font-size:clamp(30px,4vw,46px);
  letter-spacing:-.02em; margin:0; color:var(--ink); text-wrap:balance; }
.pr-thanks p{ color:var(--ink-55); font-size:17px; line-height:1.6; margin:18px auto 0; max-width:46ch; }
.pr-echo{ margin:34px auto 0; max-width:520px; border:1px solid var(--line); border-radius:18px;
  background:rgba(255,249,227,.6); padding:26px 28px; text-align:left; }
.pr-echo .lab{ color:var(--red); font:600 10.5px/1 var(--sans); letter-spacing:.2em;
  text-transform:uppercase; }
.pr-echo .w{ font-family:var(--serif); font-weight:700; font-size:26px; color:var(--ink);
  margin:12px 0 0; letter-spacing:-.01em; text-wrap:balance; }
.pr-echo .m{ color:var(--ink-55); font-size:15px; line-height:1.55; margin:10px 0 0; }
.pr-thanks .acts{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.pr-thanks .acts a, .pr-thanks .acts button{ cursor:pointer; font:600 12px/1 var(--sans);
  letter-spacing:.14em; text-transform:uppercase; padding:0 26px; height:52px;
  display:inline-flex; align-items:center; border-radius:100px; transition:.18s; }
.pr-thanks .acts .primary{ background:var(--red); border:0; color:#fff; }
.pr-thanks .acts .primary:hover{ filter:brightness(.96); }
.pr-thanks .acts .ghost{ background:none; border:1px solid var(--line-strong); color:var(--ink); }
.pr-thanks .acts .ghost:hover{ background:var(--red); border-color:var(--red); color:#fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .pr-grid{ grid-template-columns:1fr; gap:48px; }
  .pr-aside{ position:static; flex-direction:row; flex-wrap:wrap; }
  .pr-card{ flex:1 1 280px; }
}
@media (max-width:760px){
  .pr-hero{ padding-top:calc(78px + 40px); }
  .pr-body{ padding:48px 0 28px; }
  .pr-seg{ grid-template-columns:1fr; }
  .pr-row2{ grid-template-columns:1fr; }
  .pr-aside{ flex-direction:column; }
}

/* ===================== REGISTRATORE VOCALE ===================== */
.audio-rec{ margin:4px 0 2px; }
.rec-row{ display:flex; align-items:center; gap:14px; }
.rec-btn{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px; cursor:pointer;
  background:#fff; border:1px solid var(--line-strong,#dcd6c6); border-radius:11px;
  font:600 13px/1 var(--sans,sans-serif); color:var(--ink,#1c1c1c); transition:border-color .15s, background .15s; }
.rec-btn:hover{ border-color:var(--red,#a8503a); }
.rec-dot{ width:11px; height:11px; border-radius:50%; background:var(--red,#a8503a); flex:0 0 11px; transition:transform .2s; }
.audio-rec.is-recording .rec-btn{ background:var(--red,#a8503a); border-color:var(--red,#a8503a); color:#fff; }
.audio-rec.is-recording .rec-dot{ background:#fff; animation:recPulse 1s ease-in-out infinite; }
@keyframes recPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.7); opacity:.5; } }
.rec-time{ font:600 13px/1 var(--sans,sans-serif); color:var(--ink-55,#6b675f); font-variant-numeric:tabular-nums; }
.rec-preview{ display:flex; align-items:center; gap:12px; margin-top:12px; }
.rec-preview .rec-audio{ flex:1; height:36px; max-width:280px; }
.rec-redo{ background:none; border:0; cursor:pointer; font:600 12px/1 var(--sans,sans-serif);
  letter-spacing:.04em; text-transform:uppercase; color:var(--red,#a8503a); padding:6px; }
.rec-redo:hover{ text-decoration:underline; }
.rec-hint{ font-size:12.5px; color:var(--ink-55,#6b675f); margin:8px 0 0; }