/** Banner promoción PrestaFIN 2026 **/
/* Componente: todos los selectores y variables están aislados con pf-. */
    .pf-banner {
      --pf-background: #073d48;
      --pf-primary: #a9bb57;
      --pf-primary-light: #dce7b2;
      --pf-secondary: #f49d4c;
      --pf-red: #b83243;
      --pf-text: #fcfcf7;
      --pf-muted: #c9d8d8;
      position: relative;
      isolation: isolate;
      box-sizing: border-box;
      width: 100%;
      overflow: hidden;
      color: var(--pf-text);
      background: var(--pf-background);
      font-family: "Aptos", "Segoe UI", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      margin-top: 70px
    }

    .pf-banner *, .pf-banner *::before, .pf-banner *::after {
      box-sizing: border-box;
    }

    .pf-banner::before, .pf-banner::after {
      content: "";
      position: absolute;
      z-index: -1;
      pointer-events: none;
      border: 1px solid rgb(169 187 87 / 13%);
      border-radius: 50%;
    }

    .pf-banner::before {
      width: 430px;
      height: 430px;
      right: -65px;
      top: -236px;
    }

    .pf-banner::after {
      width: 530px;
      height: 530px;
      right: -115px;
      top: -286px;
      border-color: rgb(169 187 87 / 7%);
    }

    .pf-banner__inner {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr) 184px;
      grid-template-areas: "brand message action" "fine fine fine";
      column-gap: clamp(28px, 3.5vw, 64px);
      row-gap: 24px;
      align-items: center;
      width: 100%;
      max-width: 1640px;
      margin-inline: auto;
      padding: 34px clamp(24px, 3.3vw, 56px) 18px;
    }

    .pf-banner__brand {
      grid-area: brand;
      position: relative;
      margin: 0;
      padding: 13px 20px 16px;
      border: 1px solid rgb(255 255 255 / 12%);
      border-radius: 13px;
      background: var(--pf-red);
      color: #fff;
      font-size: clamp(30px, 2.5vw, 40px);
      font-weight: 750;
      line-height: 1.12;
      letter-spacing: -1.6px;
      white-space: nowrap;
    }

    .pf-banner__brand::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 3px;
      right: 18px;
      bottom: 9px;
      border-radius: 4px;
      background: var(--pf-secondary);
    }

    .pf-banner__message {
      grid-area: message;
      min-width: 0;
    }

    .pf-banner__headline {
      max-width: 690px;
      margin: 0;
      font-size: clamp(22px, 1.85vw, 28px);
      font-weight: 400;
      line-height: 1.32;
      letter-spacing: -0.55px;
      text-wrap: pretty;
    }

    .pf-banner__headline strong { font-weight: 700; }

    .pf-banner__dates {
      color: var(--pf-primary-light);
      font-weight: 650;
      white-space: nowrap;
    }

    .pf-banner__extra {
      display: flex;
      align-items: center;
      gap: 9px;
      width: fit-content;
      max-width: 100%;
      margin: 15px 0 0;
      padding: 8px 12px;
      border: 1px solid rgb(244 157 76 / 23%);
      border-radius: 8px;
      background: rgb(244 157 76 / 5%);
      color: #f4e5d6;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.45;
    }

    .pf-banner__sparkle {
      flex: 0 0 18px;
      width: 18px;
      height: 18px;
      color: var(--pf-secondary);
    }

    .pf-banner__extra strong {
      color: #ffd0a2;
      font-weight: 650;
    }

    .pf-banner__cta {
      grid-area: action;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 28px;
      min-height: 52px;
      padding: 13px 24px;
      border: 2px solid transparent;
      border-radius: 999px;
      background: var(--pf-primary);
      color: #183a32;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.3;
      text-decoration: none;
      transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    }

    .pf-banner__cta svg { flex: 0 0 20px; width: 20px; height: 20px; }

    @media (hover: hover) {
      .pf-banner__cta:hover {
        background: #bdcb7a;
        transform: translateY(-1px);
        color: #183a32;
        box-shadow: 0 0 14px rgb(169 187 87 / 40%);
      }
    }

    .pf-banner__cta:active { transform: translateY(0); }

    .pf-banner__cta:focus-visible, .pf-banner__terms:focus-visible {
      outline: 3px solid #ffd0a2;
      outline-offset: 5px;
    }

    .pf-banner__fineprint {
      grid-area: fine;
      margin: 0;
      padding-top: 14px;
      border-top: 1px solid rgb(201 216 216 / 16%);
      color: var(--pf-muted);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.6;
    }

    .pf-banner__terms {
      color: var(--pf-primary-light);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
      overflow-wrap: anywhere;
    }

    .pf-banner__terms:hover { color: var(--pf-primary-light);text-shadow: 0 0 6px var(--pf-primary-light);}

    @media (max-width: 1120px) {
      .pf-banner__inner { grid-template-columns: max-content minmax(0, 1fr) 156px; column-gap: 28px; }
      .pf-banner__brand { font-size: 30px; padding-inline: 16px; }
      .pf-banner__headline { font-size: 23px; }
      .pf-banner__extra { font-size: 13px; }
      .pf-banner__cta { gap: 18px; padding-inline: 18px; }
    }

    @media (max-width: 960px) {
      .pf-banner__inner {
        grid-template-columns: minmax(0, 1fr) 168px;
        grid-template-areas: "brand action" "message message" "fine fine";
        row-gap: 22px;
        padding-top: 28px;
      }
      .pf-banner__brand { justify-self: start; font-size: 32px; }
      .pf-banner__headline { max-width: 720px; font-size: 26px; }
      .pf-banner__extra { font-size: 14px; }
    }

    @media (max-width: 580px) {
      .pf-banner__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "brand" "message" "action" "fine";
        gap: 22px;
        padding: 28px 22px 20px;
      }
      .pf-banner__brand { font-size: 28px; padding: 11px 17px 14px; border-radius: 11px; }
      .pf-banner__headline { font-size: 22px; line-height: 1.36; letter-spacing: -0.5px; }
      .pf-banner__dates { white-space: normal; }
      .pf-banner__extra { margin-top: 17px; padding: 10px 12px; align-items: flex-start; width: 100% }
      .pf-banner__sparkle { margin-top: 2px; }
      .pf-banner__cta { width: 100%; min-height: 52px; gap: 22px; }
      .pf-banner__fineprint { font-size: 12px; padding-top: 16px; }
      .pf-banner::before { right: -285px; top: -260px; }
      .pf-banner::after { right: -335px; top: -310px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .pf-banner__cta { transition: none; }
      .pf-banner__cta:hover { transform: none; }
    }

    @media (forced-colors: active) {
      .pf-banner__brand, .pf-banner__extra, .pf-banner__cta { border: 1px solid CanvasText; }
      .pf-banner__cta:focus-visible, .pf-banner__terms:focus-visible { outline-color: Highlight; }
    }

    /* Aplicar después del CSS original. Solo cambia el fondo y su decoración. */
.pf-banner {
  --pf-background: #363d26;
  background:
    radial-gradient(ellipse at 8% 0%, rgb(169 187 87 / 6%), transparent 58%),
    radial-gradient(ellipse at 100% 100%, rgb(244 157 76 / 4%), transparent 55%),
    linear-gradient(112deg, #363d26 0%, #42482c 52%, #463b2c 100%);
}

/* Una trama de puntos que aparece suavemente hacia el extremo derecho. */
.pf-banner::before {
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background-image: radial-gradient(circle, rgb(220 231 178 / 4%) 0.7px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 48%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 48%, #000 100%);
}

/* Un único marco inclinado, sin relleno, sustituye los círculos anteriores. */
.pf-banner::after {
  width: 360px;
  height: 360px;
  right: -32px;
  top: -215px;
  border: 1px solid rgb(220 231 178 / 2.5%);
  border-radius: 48px;
  transform: rotate(-28deg);
}

@media (max-width: 580px) {
  .pf-banner::before { inset: 0; }
  .pf-banner::after {
    right: -230px;
    top: -170px;
  }
}