/* 04 · Cifra gigante — negro, lima y la cifra por encima de todo. */
.d-cifra {
  --d-bg: #0A0A0A;
  --d-ink: #F4F4F0;
  --d-soft: #B9B9B2;
  --d-line: #F4F4F0;
  --d-field-bg: #0A0A0A;
  --d-field-line: #F4F4F0;
  --d-focus: #C6FF3D;
  --d-fill: #C6FF3D;
  --d-on-fill: #0A0A0A;
  --d-ok: #C6FF3D;
  --d-money: #C6FF3D;
  --d-mark: #3D5410;
  --d-error: #FF8A80;
  --d-error-bg: #2A0E0C;
  --d-radius: 0;
  --d-font: "Space Grotesk", system-ui, sans-serif;
  --d-font-display: "Anton", Impact, sans-serif;
  --ck-bg: #C6FF3D; --ck-ink: #0A0A0A; --ck-link: #0A0A0A;
  overflow-x: clip;
}
.d-cifra .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.d-cifra .barra { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--pad-x); font-weight: 700; }
.d-cifra .barra img { height: 15px; width: auto; }

.d-cifra .golpe { padding: 10px var(--pad-x) 0; max-width: 1280px; margin: 0 auto; }
.d-cifra .previa { font-size: clamp(17px, 4.6vw, 24px); font-weight: 500; margin-bottom: 14px; }
.d-cifra .numero { font-family: var(--d-font-display); font-size: min(29vw, 320px); line-height: 0.84; letter-spacing: -0.01em; color: var(--d-fill); white-space: nowrap; }
.d-cifra h1 { margin-top: 12px; font-family: var(--d-font-display); font-weight: 400; font-size: clamp(36px, 10vw, 76px); line-height: 0.95; text-transform: uppercase; }

.d-cifra .cinta { margin: 28px -20px 0; padding: 12px 0; background: var(--d-fill); color: var(--d-on-fill); transform: rotate(-2deg); overflow: hidden; white-space: nowrap; font-family: var(--d-font-display); font-size: 22px; letter-spacing: 0.02em; }
.d-cifra .cinta span { display: inline-block; animation: d-cifra-cinta 28s linear infinite; }
@keyframes d-cifra-cinta { to { transform: translateX(-50%); } }

.d-cifra .accion { max-width: 560px; margin: 36px auto 0; padding: 0 var(--pad-x); scroll-margin-top: 12px; }
.d-cifra .field label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.d-cifra .field input, .d-cifra .field select { border-width: 2px; }
.d-cifra .field input:focus { box-shadow: none; }
.d-cifra .btn { min-height: 64px; font-size: 26px; font-weight: 400; letter-spacing: 0.02em; }
.d-cifra .success h2 { font-weight: 400; text-transform: uppercase; font-size: clamp(32px, 9vw, 46px); }
.d-cifra .exito-whatsapp { background: #161616; border: 2px solid var(--d-line); }

.d-cifra .datos { margin-top: 44px; border-top: 2px solid var(--d-line); }
.d-cifra .datos div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px var(--pad-x); border-bottom: 2px solid var(--d-line); }
.d-cifra .datos b { font-family: var(--d-font-display); font-weight: 400; font-size: clamp(48px, 13vw, 96px); line-height: 1; }
.d-cifra .datos span { font-size: 13px; text-align: right; max-width: 18ch; }

.d-cifra .cita { max-width: 900px; margin: 40px auto 0; padding: 0 var(--pad-x); font-family: var(--d-font-display); font-size: clamp(28px, 7.5vw, 54px); line-height: 1.05; text-transform: uppercase; }
.d-cifra .cita span { display: block; margin-top: 12px; font-family: var(--d-font); font-size: 13px; text-transform: none; color: var(--d-soft); }

.d-cifra .pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 40px var(--pad-x) 30px; font-size: 12.5px; color: #8C8C85; }
.d-cifra .pie nav { display: flex; gap: 16px; }

@media (min-width: 960px) {
  :root { --pad-x: 56px; }
  .d-cifra .datos { display: grid; grid-template-columns: repeat(4, 1fr); }
  .d-cifra .datos div { display: grid; gap: 6px; border-right: 2px solid var(--d-line); }
  .d-cifra .datos div:last-child { border-right: 0; }
  .d-cifra .datos span { text-align: left; }
}
