/* ===== BASE ===== */
:root{
  --fg:#111;        /* testo scuro */
  --muted:#666;
  --btn:#000; --btn-fg:#fff;
  --glass:rgba(255,255,255,.82);
  --shadow:0 10px 30px rgba(0,0,0,.15);
  --max:min(960px,92vw);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:#fff;
  background-image:url("bg.jpeg");
  background-repeat:no-repeat;
  background-size:cover;
  /*background-attachment:fixed;*/
  background-attachment:fixed;
  background-position:center;
  min-height:100vh;
  display: flex;              /* AGGIUNGI */
  flex-direction: column;     /* AGGIUNGI */
}

/* ===== HERO HOME — TUTTO CENTRATO ===== */
.hero{
  min-height: 100dvh;
  background-image: url("bg.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* L'overlay WRAPPA il contenuto: qui creo la velatura scura DIETRO ai contenuti */
.overlay{
  position: relative;
  min-height: 100dvh;
}
.overlay::before{
  content: "";
  position: fixed;           /* copre sempre il viewport mentre scrolli */
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
  z-index: 0;
  pointer-events: none;
}

/* Contenitore centrale: centrato orizz./vert. su qualunque device */
.container{
  position: relative;
  z-index: 1;                /* sopra l'overlay */
  display: grid;
  place-items: center;       /* centro completo */
  gap: 26px;
  text-align: center;
  max-width: min(960px, 92vw);
  margin: 0 auto;
  padding: 0 16px 90px;      /* spazio per footer fisso */
  min-height: 100dvh;        /* occupa l'altezza del viewport */
  color: #fff;
}

/* Box grigio centrato sopra al testo (se hai l’elemento .logo-box in HTML) */
.logo{
  width: clamp(220px, 60vw, 420px);  /* si adatta al device */
  height: auto;                      /* mantiene le proporzioni del file */
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  margin-bottom: 30px;
}

/* Se NON hai l’elemento .logo-box in HTML e vuoi generarlo via CSS: 
.hero .container::before{
  content:""; display:block;
  width:min(350px,90vw); height:min(250px,60vh);
  background:#888;
  border-radius:12px;
  box-shadow:var(--shadow);
}*/

/* Testi e bottone */
h1{
  font-size:clamp(32px,6vw,56px);
  line-height:1.1;
  margin:0;
}
.lead{
  font-size:clamp(16px,2.5vw,22px);
  opacity:.95;
  margin:0;
}
.btn{
  display:inline-block;
  padding:14px 28px;
  border-radius:999px;
  background:var(--btn);
  color:var(--btn-fg);
  text-decoration:none;
  font-weight:600;
  box-shadow:var(--shadow);
  transition:opacity .2s;
}
.btn:hover{opacity:.9}

/* Box del logo: proporzioni automatiche, centrato sopra il testo */
.logo-box{
  width:clamp(220px, 60vw, 420px);    /* si adatta al device */
  background:#888 url('logo.png') center/contain no-repeat;
  border-radius:12px;
  box-shadow:var(--shadow);
  margin-bottom:30px;
  aspect-ratio:auto;                  /* lascia il browser mantenere proporzioni */
  height:auto;                        /* calcolato automaticamente */
}

/* Mobile fine-tuning: riduzione solo della larghezza */
@media (max-width:680px){
  .logo-box{
    width:70vw;
  }
}

/* Mobile fine-tuning 
@media (max-width:680px){
  .logo-box{width:280px; height:200px;}
}*/

/* Quando avrai il logo PNG, puoi usare QUESTO override (facoltativo) 
.hero.logo-image .container::before{
  background:#888 url('logo.png') center/contain no-repeat;
}*/


h1{font-size:clamp(32px,6vw,56px); margin:0 0 10px}
.lead{font-size:clamp(16px,2.5vw,22px); opacity:.95; margin:0 0 28px}
.btn{
  display:inline-block; padding:14px 22px; border-radius:999px;
  background:var(--btn); color:var(--btn-fg); text-decoration:none; font-weight:600;
  box-shadow:var(--shadow); transition:opacity .2s;
}
.btn:hover{opacity:.9}

/* ===== FOOTER SEMPRE IN FONDO (bianco) ===== */
.foot{
  width: 100%;
  text-align: center;
  color: #FFFFFF;
  padding: 16px;
  text-shadow: 0 2px 6px rgba(255,255,255,.4);
  margin-top: auto;
}

/* ===== PAGINE INTERNE (CONTRIBUTO) ===== */
.page{background:linear-gradient(180deg,#ffffff,#fafafa)}
.topbar{max-width:var(--max); margin:0 auto; padding:16px}
.link{color:#0066cc; text-decoration:none}
.link:hover{text-decoration:underline}

/* Card centrale */
.panel{max-width:var(--max); margin:4vh auto 10vh; padding:0 16px}
.panel h1{font-size:42px; margin:0 0 8px; color:var(--fg)}
.muted{color:var(--muted); margin:0 0 18px}

.card{
  background:var(--glass); backdrop-filter:blur(6px);
  border:1px solid rgba(0,0,0,.05);
  border-radius:18px; padding:18px; box-shadow:var(--shadow);
}

/* Righe label/valore */
.row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px 4px; flex-wrap:nowrap;
}
.label{
  font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); flex:0 0 auto; min-width:140px;
}
.value{
  flex:1 1 auto; font-size:20px; font-weight:700; color:var(--fg);
  word-break:break-word;
}

/* Riga IBAN con bottone a destra */
.row.iban{ align-items:center; }
.iban-value{
  flex:1 1 auto; font-size:22px; font-weight:800; letter-spacing:.02em;
  word-break:break-all;
}
.copy-wrap{
  flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end;
}
.copy-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:999px; border:0;
  background:#000; color:#fff; font-weight:700; cursor:pointer;
  box-shadow:var(--shadow);
  white-space:nowrap;
}
.copy-btn:hover{opacity:.9}

/* Suggerimento in fondo */
.hint{ margin-top:16px; color:var(--muted); font-size:15px; }

/* ===== RESPONSIVE ===== */
@media (max-width:680px){
  .label{min-width:110px}
  .iban-value{font-size:20px}
  .copy-btn{padding:11px 16px}
}
@media (max-width:460px){
  .label{min-width:96px}
  .row{gap:10px}
  .iban-value{font-size:18px}
  .copy-btn{padding:10px 14px}
}

.upload-card {
  max-width: 480px;
  margin: 3rem auto;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.15);
}

.upload-card h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.6rem;
}

.upload-subtitle {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 0.98rem;
  color: #444;
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.field input[type="text"],
.field input[type="file"] {
  width: 100%;
  font-size: 0.95rem;
}

.btn-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-upload-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.btn-upload:hover {
  background: #f3f3f3;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.btn-upload:active {
  transform: translateY(0);
  box-shadow: none;
}

.upload-status {
  margin-top: 1rem;
  font-size: 0.95rem;
  min-height: 1.2em;
}

.upload-status--success {
  color: #0a7b3b;
}

.upload-status--error {
  color: #b00020;
}

/* Responsive: un po' più compatta su schermi piccoli */
@media (max-width: 600px) {
  .upload-card {
    margin: 2rem 1rem;
    padding: 1.5rem;
  }

  .upload-card h1 {
    font-size: 1.4rem;
  }
}

.upload-card h1,
.upload-card label,
.upload-subtitle,
.upload-status {
  color: #111 !important;
}

.field input[type="text"],
.field input[type="file"] {
  color: #111 !important;
}

.btn-upload-home {
  display: inline-block;
  padding: 14px 28px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-upload-home:hover {
  background: #f5f5f5;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

.btn-upload-home:active {
  transform: translateY(0);
  box-shadow: none;
}