/* assets/marketing/pagine/contatti.css — stili della sola pagina contatti.html
   TF-MKT-REFACTOR-2026-10-06 (passo meccanico): i blocchi <style> della pagina, byte per
   byte e nello stesso ordine. I blocchi stavano nel <body>: il <link> e' in fondo al <head>,
   dopo ../nav.css, che era il primo foglio del <body>: l'ordine fra fogli non cambia. */

/* ═══ [1] blocco per <section class="cvB-hero" aria-label="Contatti"> ═══ */
/* ============================================================
   CV-B — Contatti "Bianco editoriale"
   Sezione bianca, niente card: copy a sinistra, ritratto della
   modella a destra dentro un pannello pastello alto e arrotondato
   (cornice morbida, solo lei). Trust micro-riga sotto la CTA.
   Linguaggio HV4c-1a: zero movimento, aria generosa, una parola
   accento in tinta unita, pannello #fff7ed bordo #fde68a.
   Header flottante ~130px: padding-top dedicato.
   ============================================================ */
.cvB-hero {
position: relative;
background: #fff;
overflow-x: hidden;
overflow-x: clip;
padding: 158px 0 56px;
}

.cvB-grid {
max-width: 1290px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
gap: 40px 72px;
align-items: center;
}
@media (min-width: 1440px) {
.cvB-grid { padding: 0; }
}

/* ---------- Colonna copy ---------- */
.cvB-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.cvB-eyebrow {
margin: 0 0 18px;
font-size: 13px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #d97706;
}

.cvB-h1 {
margin: 0 0 28px;
max-width: 16ch;
font-size: clamp(40px, 4.6vw, 54px);
line-height: 1.08;
letter-spacing: -0.025em;
font-weight: 700;
color: #0f172a;
}
.cvB-h1-accent { color: #d97706; }

.cvB-sub {
margin: 0 0 36px;
max-width: 46ch;
font-size: 17.5px;
line-height: 1.6;
font-weight: 400;
color: rgba(15,23,42,.62);
}

/* ---------- CTA ---------- */
.cvB-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 12px;
padding: 14px 28px;
font-size: 15px;
font-weight: 600;
color: #fff;
text-decoration: none;
background-color: #f59e0b;
box-shadow: 0 1px 2px rgba(15,23,42,.08);
transition: background-color .15s ease, box-shadow .15s ease;
}
.cvB-cta:hover { background-color: #d97706; }
.cvB-cta:focus-visible {
outline: 2px solid #b45309;
outline-offset: 2px;
}
.cvB-cta-arrow { flex: none; display: block; width: 15px; height: 15px; }

/* ---------- Trust micro-riga ---------- */
.cvB-trust {
margin: 20px 0 0;
font-size: 13.5px;
line-height: 1.5;
color: rgba(15,23,42,.55);
}
.cvB-trust strong { font-weight: 600; color: #0f172a; }
.cvB-trust-dot { margin: 0 8px; color: rgba(15,23,42,.3); }

/* ---------- Pannello ritratto (cornice morbida) ---------- */
.cvB-frame {
position: relative;
aspect-ratio: 3 / 4;
border-radius: 36px;
background: #fff7ed;
border: 1px solid #fde68a;
overflow: hidden;
}
.cvB-portrait {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
height: 92%;
width: auto;
max-width: none;
user-select: none;
}

/* ---------- Tablet: stack, ritratto sotto il copy ---------- */
@media (max-width: 1023px) {
.cvB-hero { padding: 142px 0 48px; }
.cvB-grid {
grid-template-columns: minmax(0, 1fr);
gap: 44px;
}
.cvB-frame {
width: min(100%, 480px);
margin: 0 auto;
border-radius: 30px;
}
.cvB-portrait { height: 90%; }
}

@media (max-width: 639px) {
.cvB-hero { padding: 132px 0 40px; }
.cvB-eyebrow { margin-bottom: 14px; }
.cvB-h1 { font-size: clamp(34px, 9vw, 40px); margin-bottom: 24px; }
.cvB-sub { font-size: 16.5px; margin-bottom: 30px; }
.cvB-cta { width: 100%; }
.cvB-trust { margin-top: 16px; }
.cvB-grid { gap: 38px; }
.cvB-frame { border-radius: 26px; }
}

/* ═══ [2] blocco per <section class="py-12 lg:py-20"> ═══ */
/* Premium contact form */
.tf-cf-input{position:relative}
.tf-cf-input input,.tf-cf-input textarea,.tf-cf-input select{
  width:100%;padding:14px 16px 14px 46px;font-size:14px;color:#0f172a;
  background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;
  outline:none;transition:all .2s cubic-bezier(.4,0,.2,1);
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  font-family:inherit
}
.tf-cf-input textarea{padding-left:46px;padding-top:14px;min-height:140px;resize:vertical;line-height:1.55}
.tf-cf-input input:hover,.tf-cf-input textarea:hover,.tf-cf-input select:hover{border-color:#cbd5e1}
.tf-cf-input input:focus,.tf-cf-input textarea:focus,.tf-cf-input select:focus{
  border-color:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,0.12)
}
.tf-cf-input .tf-cf-icon{position:absolute;left:16px;top:16px;width:18px;height:18px;color:#94a3b8;pointer-events:none;transition:color .2s}
.tf-cf-input textarea ~ .tf-cf-icon{top:16px}
.tf-cf-input input:focus ~ .tf-cf-icon,.tf-cf-input textarea:focus ~ .tf-cf-icon,.tf-cf-input select:focus ~ .tf-cf-icon{color:#f59e0b}
.tf-cf-input select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:16px;padding-right:46px;cursor:pointer
}

.tf-cf-quiz{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);
  border:1.5px solid #fde68a;border-radius:16px;padding:16px 18px;
  position:relative;overflow:hidden
}
.tf-cf-quiz::before{
  content:'';position:absolute;left:-20px;top:-20px;width:80px;height:80px;
  background:radial-gradient(circle,rgba(245,158,11,0.18),transparent 70%);
  pointer-events:none
}
.tf-cf-quiz-icon{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:#f59e0b;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px rgba(245,158,11,0.28);position:relative;z-index:1}
.tf-cf-quiz-body{flex:1;min-width:0;position:relative;z-index:1}
.tf-cf-quiz-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#b45309;margin:0 0 4px}
.tf-cf-quiz-q{font-size:16px;font-weight:600;color:#0f172a;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tf-cf-quiz-q strong{font-size:18px;font-weight:700;color:#92400e}
.tf-cf-quiz-input{
  width:64px;text-align:center;padding:8px 10px;font-size:16px;font-weight:700;color:#0f172a;
  background:#fff;border:1.5px solid #fde68a;border-radius:10px;outline:none;transition:all .2s
}
.tf-cf-quiz-input:focus{border-color:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,0.18)}
.tf-cf-quiz-input.is-ok{border-color:#10b981;background:#ecfdf5;color:#047857}
.tf-cf-quiz-input.is-ko{border-color:#f43f5e;background:#fff1f2;color:#be123c}
.tf-cf-quiz-status{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#10b981;opacity:0;transition:opacity .25s;position:relative;z-index:1}
.tf-cf-quiz-status.show{opacity:1}

.tf-cf-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.tf-cf-submit{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:16px 28px;font-size:15px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
  border:none;border-radius:14px;cursor:pointer;
  box-shadow:0 8px 20px -4px rgba(245,158,11,0.4),0 2px 6px -2px rgba(245,158,11,0.2);
  transition:all .25s cubic-bezier(.4,0,.2,1);overflow:hidden
}
.tf-cf-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 28px -4px rgba(245,158,11,0.5),0 4px 10px -2px rgba(245,158,11,0.3)}
.tf-cf-submit:active:not(:disabled){transform:translateY(0)}
.tf-cf-submit:disabled{opacity:.7;cursor:wait}
.tf-cf-submit::after{
  content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.25) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .9s
}
.tf-cf-submit:hover:not(:disabled)::after{transform:translateX(100%)}
.tf-cf-submit svg{transition:transform .25s}
.tf-cf-submit:hover:not(:disabled) svg{transform:translateX(3px)}

@keyframes spin{to{transform:rotate(360deg)}}
.tf-cf-spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}