/* ---- Tokens del component (derivats de la marca maneranegra) ---- */
.mn-cr-box{
  --mn-ink:#1a1a1a;
  --mn-paper:#faf9f5;
  --mn-line:#ddd8cc;
  --mn-accent:#d6006e;
  --mn-accent-ink:#a80057;
  --mn-muted:#6b675e;
  --mn-focus:#d6006e;

  max-width:720px;
  margin:64px auto 24px;     /* bloc centrat com a columna */
  padding:36px 0 8px;
  border-top:1px solid var(--mn-line);
  background:transparent;
  text-align:left;           /* contingut alineat a l'esquerra */
}

/* ---- Eyebrow editorial ---- */
.mn-cr-eyebrow{
  margin:0 0 10px;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--mn-accent);
}

/* ---- Títol (hereta la serif del tema) ---- */
.mn-cr-title{
  margin:0 0 6px;
  font-size:clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--mn-ink);
}

.mn-cr-intro{
  margin:0 0 22px;
  font-size:1rem;
  line-height:1.6;
  color:var(--mn-muted);
}

/* ---- Fila email + botó (desktop) ---- */
.mn-cr-form{ max-width:640px; }
.mn-cr-row{
  display:flex;
  align-items:flex-end;
  gap:12px;
}
.mn-cr-field{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.mn-cr-label{
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mn-muted);
}

/* ---- Input: línia inferior, no caixa ---- */
.mn-cr-input{
  width:100%;
  padding:10px 2px;
  font-size:1rem;
  color:var(--mn-ink);
  background:transparent;
  border:0;
  border-bottom:1.5px solid var(--mn-line);
  border-radius:0;
  transition:border-color .18s ease;
  -webkit-appearance:none;
  appearance:none;
}
.mn-cr-input::placeholder{ color:#b3aea2; }
.mn-cr-input:hover{ border-bottom-color:var(--mn-muted); }
.mn-cr-input:focus{ outline:none; border-bottom-color:var(--mn-accent); }
.mn-cr-input:focus-visible{ outline:2px solid var(--mn-focus); outline-offset:3px; }

/* ---- Botó ---- */
.mn-cr-btn{
  flex:0 0 auto;
  padding:11px 26px;
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  color:#fff;
  background:var(--mn-ink);
  border:0;
  border-radius:0;
  cursor:pointer;
  transition:background-color .18s ease, transform .18s ease;
}
.mn-cr-btn:hover{ background:var(--mn-accent); }
.mn-cr-btn:active{ transform:translateY(1px); }
.mn-cr-btn:focus-visible{ outline:2px solid var(--mn-focus); outline-offset:3px; }
.mn-cr-btn:disabled{ opacity:.5; cursor:default; }

/* ---- Consentiment ---- */
.mn-cr-consent{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:16px;
  font-size:.82rem;
  line-height:1.5;
  color:var(--mn-muted);
  cursor:pointer;
  text-transform:none !important;   /* el tema força majúscula als labels amb !important; el consentiment va en minúscula */
}
.mn-cr-consent span{ text-transform:none !important; }
.mn-cr-checkbox{
  flex:0 0 auto;
  width:16px;
  height:16px;
  margin-top:2px;
  accent-color:var(--mn-accent);
}
.mn-cr-consent a{
  color:var(--mn-accent-ink);
  text-decoration:underline;
  text-underline-offset:2px;
}
.mn-cr-consent a:hover{ color:var(--mn-accent); }

/* ---- Missatge d'estat ---- */
.mn-cr-msg{
  margin:14px 0 0;
  min-height:1.2em;
  font-size:.88rem;
  line-height:1.4;
}
.mn-cr-msg.is-ok{ color:var(--mn-accent-ink); }
.mn-cr-msg.is-error{ color:#b00020; }

/* ---- Honeypot ---- */
.mn-cr-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- Responsive: mòbil ---- */
@media (max-width:600px){
  .mn-cr-box{ margin:48px 0 16px; padding:28px 0 8px; }
  .mn-cr-row{ flex-direction:column; align-items:stretch; gap:14px; }
  .mn-cr-btn{ width:100%; padding:14px 26px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .mn-cr-input, .mn-cr-btn{ transition:none; }
}