/* vínQulo · newsletter «Matchmaker desde dentro» — hoja propia, mobile-first.
   Marca (manual de identidad VÍNQULO 2024): negro #2D2926 · cobre #9C6B45→#C08D5F→#D7AE83→#EAD6B8 ·
   azul #0032A0 solo para resaltar · Abril Fatface (titulares) + Josefin Sans (texto). */

@font-face { font-family: 'Abril Fatface'; src: url('/shared/fonts/abril-fatface-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Josefin Sans'; src: url('/shared/fonts/josefin-sans-latin.woff2') format('woff2'); font-weight: 100 700; font-display: swap; }

:root {
  --negro: #2D2926;
  --negro-hondo: #221f1d;
  --cobre-1: #9C6B45;
  --cobre-2: #C08D5F;
  --cobre-3: #D7AE83;
  --cobre-4: #EAD6B8;
  --azul: #0032A0;
  --crema: #F8F2EA;            /* tinte del cobre claro de marca */
  --texto: #2D2926;
  --texto-suave: #5b524c;
  --sobre-negro: #F4ECE2;
  --sobre-negro-suave: #cdbfb1;
  --cobre-grad: linear-gradient(120deg, var(--cobre-1) 0%, var(--cobre-2) 35%, var(--cobre-3) 70%, var(--cobre-4) 100%);
  --radio: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--negro); }
body {
  font-family: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 22px; }

/* ── Cabecera / hero ───────────────────────────────────────────── */
.hero { background: radial-gradient(120% 80% at 50% 0%, #3a3430 0%, var(--negro) 55%, var(--negro-hondo) 100%); color: var(--sobre-negro); padding: 14px 0 52px; position: relative; overflow: hidden; }
.hero .logo { width: 170px; height: auto; margin: -10px auto 6px; }
.eyebrow { font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; text-align: center; color: var(--cobre-3); margin: 0 0 14px; }
h1 { font-family: 'Abril Fatface', Georgia, serif; font-weight: 400; font-size: clamp(2.5rem, 11vw, 3.9rem); line-height: 1.04; text-align: center; margin: 0 0 18px; letter-spacing: .005em; }
h1 .cobre { background: var(--cobre-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { text-align: center; font-size: 1.15rem; line-height: 1.5; color: var(--sobre-negro); margin: 0 auto 14px; max-width: 30ch; }
.anti p { margin: 0 0 8px; color: var(--sobre-negro-suave); }
.anti p.fuerte { color: var(--sobre-negro); font-weight: 600; }

/* ── El lazo: firma de la marca ────────────────────────────────── */
.lazo { display: block; width: 100%; height: 56px; margin: 0; }
.lazo path { fill: none; stroke: url(#cobre); stroke-width: 2.2; stroke-linecap: round; }
.hero .lazo { margin: 0 0 14px; height: 44px; }

/* ── Formulario ────────────────────────────────────────────────── */
.caja-form { background: rgba(255,255,255,.04); border: 1px solid rgba(215,174,131,.35); border-radius: var(--radio); padding: 20px 18px 16px; margin-top: 8px; }
.claro .caja-form { background: #fff; border-color: rgba(156,107,69,.28); box-shadow: 0 10px 30px rgba(45,41,38,.07); }
.antes-boton { margin: 0 0 12px; font-weight: 600; }
.claro .antes-boton { color: var(--texto); }
.campo { display: block; margin: 0 0 10px; }
.campo span { display: block; font-size: .85rem; font-weight: 600; letter-spacing: .04em; margin: 0 0 4px; }
.campo input { width: 100%; font: inherit; font-size: 1.05rem; padding: 14px 14px 12px; border-radius: 10px; border: 1px solid rgba(215,174,131,.5); background: #fff; color: var(--texto); }
.campo input:focus { outline: 3px solid rgba(192,141,95,.45); outline-offset: 1px; border-color: var(--cobre-2); }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.4; margin: 6px 0 14px; }
.casilla input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--cobre-2); flex: 0 0 auto; }
.boton { display: block; width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 1.08rem; letter-spacing: .02em; padding: 17px 16px 15px; border-radius: 999px; color: var(--negro); background: var(--cobre-grad); box-shadow: 0 8px 22px rgba(156,107,69,.35); transition: transform .12s ease, filter .12s ease; }
.boton:hover { filter: brightness(1.04); }
.boton:active { transform: scale(.97); }
.boton[disabled] { opacity: .7; cursor: wait; }
.tras-boton { font-size: .92rem; margin: 10px 2px 0; text-align: center; opacity: .9; }
.legal { font-size: .74rem; line-height: 1.4; margin: 10px 0 0; opacity: .75; text-align: center; }
.form-error { display: none; margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: #fbeaea; color: #7a1f1f; font-size: .92rem; }
.form-error.show { display: block; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── Secciones claras ──────────────────────────────────────────── */
.claro { background: var(--crema); color: var(--texto); padding: 50px 0; }
.claro.blanco { background: #fff; }
h2 { font-family: 'Abril Fatface', Georgia, serif; font-weight: 400; font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.12; margin: 0 0 18px; }
.claro p { margin: 0 0 14px; }
.lista { list-style: none; padding: 0; margin: 4px 0 22px; }
.lista li { position: relative; padding: 0 0 12px 30px; }
.lista li::before { content: ''; position: absolute; left: 4px; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--cobre-grad); }
.resalte { color: var(--azul); font-weight: 600; }
.nota-final { font-weight: 600; }

/* ── Historia ──────────────────────────────────────────────────── */
.historia { background: var(--negro); color: var(--sobre-negro); padding: 54px 0; }
.historia h2 { color: var(--sobre-negro); }
.historia p { margin: 0 0 14px; color: var(--sobre-negro-suave); }
.historia p.clave { color: var(--sobre-negro); font-weight: 600; }
.firma { margin-top: 26px; }
.firma .despedida { font-style: italic; color: var(--sobre-negro-suave); margin: 0 0 4px; }
.firma .nombre { font-family: 'Abril Fatface', Georgia, serif; font-size: 1.7rem; margin: 0; background: var(--cobre-grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.firma .cargo { margin: 2px 0 0; font-size: .95rem; color: var(--sobre-negro-suave); }

/* ── Pie ───────────────────────────────────────────────────────── */
.pie { background: var(--negro-hondo); color: var(--sobre-negro-suave); font-size: .85rem; text-align: center; padding: 26px 0 34px; }
.pie a { color: var(--sobre-negro-suave); }

/* ── Gracias ───────────────────────────────────────────────────── */
.gracias-hero { padding-bottom: 40px; }
.paso { background: #fff; border-radius: var(--radio); padding: 22px 20px; border: 1px solid rgba(156,107,69,.25); }
.paso h2 { font-size: 1.6rem; }

@media (min-width: 760px) {
  body { font-size: 1.18rem; }
  .hero { padding: 40px 0 70px; }
  .hero .logo { width: 210px; }
  .claro, .historia { padding: 70px 0; }
}

@media (prefers-reduced-motion: reduce) { .boton { transition: none; } }