/*
 * Oferta del primer mes gratis como franja delgada arriba del encabezado de la página de inicio, en escritorio y celular, con
 * el fucsia cambiando de tono (Fernando, 14 de octubre de 2026). promo.css y promo-movil.css no se modifican: este archivo se
 * carga después de ellos y solo en la página pública.
 */
:root{--franja:32px}
body.in .pf-promo-tab{position:fixed;top:0;left:0;right:0;bottom:auto;z-index:41;transform:none;writing-mode:horizontal-tb;width:100%;height:var(--franja);max-height:none;
  display:flex;align-items:center;justify-content:center;gap:10px;padding:0 16px;border-radius:0;box-shadow:none;letter-spacing:.06em;font-family:inherit;font-size:.72rem;font-weight:700;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;color:#fff;
  background:linear-gradient(100deg,#ff015b,#ff3d8b,#e0007a,#ff5c9e,#ff015b);background-size:300% 100%;animation:franjaTono 9s ease-in-out infinite}
body.in .pf-promo-tab::after{content:"Ver oferta ›";flex:0 0 auto;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.2);letter-spacing:.04em;text-transform:none;font-weight:700}
body.in .pf-promo-tab:hover{padding:0 16px;filter:brightness(1.06)}
body.in .pf-promo-tab:hover::after{background:rgba(255,255,255,.32)}
@keyframes franjaTono{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){body.in .pf-promo-tab{animation:none}}
/* La barra de navegación baja para dejar ver la franja. */
body.in .in-nav{top:var(--franja)}
body.in .in-hero{padding-top:calc(var(--franja) + 150px)}
@media (max-width:1000px){body.in .in-hero{padding-top:calc(var(--franja) + 120px)}}
@media (max-width:680px){
  /* En celular el texto ocupa dos renglones cortos y el botón «Ver» queda a la derecha. */
  :root{--franja:40px}
  body.in .pf-promo-tab{font-size:.6rem;letter-spacing:.03em;gap:10px;padding:0 12px;white-space:normal;line-height:1.25;text-align:left;justify-content:space-between}
  body.in .pf-promo-tab:hover{padding:0 12px}
  body.in .pf-promo-tab::after{content:"Ver ›";padding:4px 10px}
  body.in .in-hero{padding-top:calc(var(--franja) + 104px)}
}
@media (max-height:520px) and (orientation:landscape){body.in .pf-promo-tab:not(.en-app){top:0;max-height:none;height:var(--franja)}}
/* Los enlaces del menú (Productos, Cómo funciona, Seguridad) llegan a cada sección sin que la franja ni la barra tapen el título. */
html:has(body.in){scroll-padding-top:calc(var(--franja) + 70px)}
body.in .in-prod{scroll-margin-top:calc(var(--franja) + 70px)}
/* La franja alterna con la publicidad de KUFE - Factura Express (Fernando, 23 de octubre de 2026; franja-kufe.js). */
body.in .pf-promo-tab{transition:opacity .25s}
body.in .pf-promo-tab.cambiando{opacity:.15}
body.in .pf-promo-tab.modo-kufe::after{content:"Conocer KUFE ›"}
@media (max-width:680px){body.in .pf-promo-tab.modo-kufe::after{content:"Ver ›"}}