/* Banner de Promo volantes en el home, justo después del hero. */
.chp-banner{--ink:#0a0a0a;--purple:#9d49ec;--lime:#cafb24;background:linear-gradient(180deg,#fbfaf6 0%,#efe9dc 100%);
  border-block:1px solid #d8d6cf;position:relative;overflow:hidden}
.chp-banner::before{content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;
  background:linear-gradient(90deg,rgba(0,174,239,.16),rgba(157,73,236,.14),rgba(202,251,36,.22));transform:rotate(-3deg)}
.chp-banner__link{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:clamp(24px,5vw,64px);
  align-items:center;width:min(1180px,calc(100% - 40px));margin-inline:auto;padding:clamp(36px,5vw,64px) 0;
  color:var(--ink);text-decoration:none}
.chp-banner__eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-mono,ui-monospace,monospace);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--purple)}
.chp-banner__eyebrow::before{content:"";width:32px;height:1px;background:var(--purple)}
.chp-banner__tit{font-family:var(--font-serif,Fraunces,Georgia,serif);font-weight:400;font-size:clamp(2rem,4.4vw,3.6rem);
  line-height:1.02;letter-spacing:-.03em;margin:.8rem 0 1rem;color:var(--ink)}
.chp-banner__tit em{font-style:italic;font-weight:300;color:var(--purple)}
.chp-banner__lead{font-size:1.08rem;line-height:1.65;color:#263241;max-width:52ch;margin:0 0 1.2rem}
.chp-banner__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem}
.chp-banner__chip{background:var(--ink);color:#fff;font-weight:700;font-size:.88rem;padding:.45rem .9rem;border-radius:999px}
.chp-banner__chip--lima{background:var(--lime);color:var(--ink)}
.chp-banner__cta{display:inline-flex;font-weight:700;font-size:1.05rem;padding:.95rem 1.4rem;border-radius:4px;background:var(--ink);
  color:#fff;transition:background .2s ease,transform .2s ease}
.chp-banner__link:hover .chp-banner__cta{background:var(--purple);transform:translateY(-2px)}
.chp-banner__svg{display:block;width:100%;height:auto;border:1px solid rgba(10,10,10,.14);
  box-shadow:0 28px 80px -40px rgba(10,10,10,.5);transform:rotate(2deg);transition:transform .35s ease}
.chp-banner__link:hover .chp-banner__svg{transform:rotate(0) scale(1.02)}
/* minmax(0,…) y min-width:0: sin eso la columna no baja del ancho del SVG y
   en el celular el banner se salía por la derecha. */
.chp-banner__texto,.chp-banner__pliego{min-width:0}
@media (max-width:860px){.chp-banner__link{grid-template-columns:minmax(0,1fr)}
  .chp-banner__pliego{order:-1;width:100%;max-width:520px;padding:0 6px}}
@media (prefers-reduced-motion:reduce){.chp-banner__svg,.chp-banner__cta{transition:none}}