/* ============================================================
   01 · ARRANQUE (hero)
   Anatomy unlike siblings: campo claro asimétrico. Columna de
   texto ancha a la izquierda (volante + titular grande + dos
   bajadas + CTA) y una foto-pizarra alta a la derecha con una
   ficha-marcador "1 X 2" pegada a mano. Salpicón verde al fondo,
   nada centrado, sin triplete eyebrow→h2→lead.
   ============================================================ */

.arranque {
  position: relative;
  padding: clamp(2.6rem, 1.6rem + 5vw, 5.5rem) var(--calle) var(--tramo);
  background:
    radial-gradient(60% 50% at 88% 6%, rgba(22,196,109,0.18) 0%, transparent 60%),
    radial-gradient(40% 40% at 96% 0%, rgba(11,138,75,0.12) 0%, transparent 55%),
    linear-gradient(180deg, var(--cal-claro) 0%, var(--cal) 100%);
  overflow: hidden;
}
/* línea de cal diagonal de fondo (gesto "a mano") */
.arranque::before {
  content: ""; position: absolute; right: -6%; top: 12%;
  width: 46%; height: 3px; background: var(--verde-grad);
  transform: rotate(-18deg); opacity: 0.5; pointer-events: none;
}

.arranque__grilla {
  position: relative; z-index: 2;
  width: var(--cancha); max-width: 1300px; margin-inline: auto;
  display: grid; grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(2rem, 4vw, 5rem); align-items: center;
}

/* ---- columna de texto ---- */
.arranque__volante { margin-bottom: 1.6rem; transform: rotate(-1.1deg); transform-origin: left; }
.arranque__titular {
  font-size: var(--t-arranque);
  margin-bottom: 1.6rem; max-width: 15ch;
}
/* resaltado de marcador "a mano" en vez del degradado prolijo */
.arranque__titular .en-brillo {
  -webkit-text-fill-color: var(--tinta); color: var(--tinta);
  background: linear-gradient(transparent 56%, rgba(22,196,109,0.55) 56% 94%, transparent 94%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 0.08em;
}
.arranque__bajada {
  font-size: var(--t-lead); color: var(--tinta); max-width: 52ch; margin-bottom: 1.1rem;
}
.arranque__nota {
  font-size: var(--t-texto); color: var(--tinta-media); max-width: 54ch; margin-bottom: 2.2rem;
}
.arranque__cta { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

/* ---- foto-pizarra (colgada un poco torcida) ---- */
.arranque__media { position: relative; }
.arranque__plano {
  aspect-ratio: 4 / 4.4;
  transform: rotate(-1.6deg);
  border: 3px solid var(--tinta);
  border-radius: 20px 8px 18px 6px;          /* esquinas dispares */
  box-shadow: 9px 9px 0 var(--cesped);       /* sombra dura tipo sticker */
}

/* ficha-marcador pegada a mano (humanización) */
.arranque__ficha {
  position: absolute; left: -1.3rem; bottom: 1.6rem; z-index: 3;
  background: var(--cal-claro); border-radius: 12px 5px 11px 6px;
  padding: 0.9rem 1.1rem; box-shadow: 5px 5px 0 var(--tinta);
  transform: rotate(-4.5deg); border: 2.5px solid var(--tinta);
}
.arranque__ficha-tope {
  display: flex; align-items: center; gap: 0.5ch;
  font-family: "Mulish", sans-serif; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--cesped);
  margin-bottom: 0.6rem;
}
.arranque__ficha-tope span {
  width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--brillo);
}
.arranque__cuotas { display: flex; gap: 0.5rem; }
.arranque__cuota {
  display: grid; gap: 0.15rem; justify-items: center;
  background: var(--cal-honda); border-radius: 9px; padding: 0.45rem 0.8rem;
}
.arranque__cuota b {
  font-family: "Gabarito", sans-serif; font-size: 0.72rem; font-weight: 700;
  color: var(--tinta-tenue); letter-spacing: 0.04em;
}
.arranque__cuota em {
  font-family: "Gabarito", sans-serif; font-style: normal; font-weight: 800;
  font-size: 1.05rem; color: var(--tinta);
}

@media (max-width: 1024px) {
  .arranque { padding-top: clamp(1.8rem, 1rem + 4vw, 3rem); }
  .arranque__grilla { grid-template-columns: 1fr; gap: 2rem; }
  .arranque__titular, .arranque__bajada, .arranque__nota { max-width: none; }

  /* el CTA sube al primer pantallazo, justo bajo el titular */
  .arranque__texto { display: flex; flex-direction: column; }
  .arranque__volante { order: 1; margin-bottom: 0.9rem; }
  .arranque__titular { order: 2; margin-bottom: 1.2rem; }
  .arranque__cta     { order: 3; margin-bottom: 1.8rem; }
  .arranque__bajada  { order: 4; }
  .arranque__nota    { order: 5; }

  .arranque__media { order: 6; }
  .arranque__plano { aspect-ratio: 4 / 3.2; transform: none; box-shadow: 6px 6px 0 var(--cesped); }
  .arranque__volante { transform: none; }
  .arranque__cta { flex-direction: column; align-items: stretch; }
  .arranque__cta .subraya { justify-content: center; }
}