/* Promociones temporales (js/promo.js). Post-it blanco con cinta en el Home; globo de Porfirio en el resto. */
.promo-postit{
  position:absolute; z-index:5; right:clamp(24px,7vw,120px); top:clamp(110px,24%,220px);
  width:clamp(170px,15vw,220px); padding:30px 18px 18px; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; text-decoration:none;
  background:linear-gradient(170deg,#FFFFFF 0%,#FBFAF5 70%,#F2F0E8 100%); color:#10254F;
  font-family:'Caveat','Segoe Print',cursive;
  box-shadow:0 18px 26px -14px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.18);
  transform:rotate(-4deg) translateY(-12px) scale(.9); opacity:0; transform-origin:50% 0;
  transition:transform .55s cubic-bezier(.3,1.5,.55,1), opacity .35s ease;
}
.promo-postit{ visibility:hidden; }
.promo-postit.pega{ opacity:1; transform:rotate(-4deg); visibility:visible; }   
.promo-postit:hover{ transform:rotate(-1.5deg) scale(1.04); }
.promo-postit__cinta{ position:absolute; top:-12px; left:50%; width:84px; height:26px; margin-left:-42px; transform:rotate(3deg);
  background:rgba(238,232,214,.78); box-shadow:0 1px 2px rgba(0,0,0,.15); }
.promo-postit__tit{ font-size:clamp(30px,2.6vw,40px); line-height:1; font-weight:700; }
.promo-postit__det{ font-size:clamp(20px,1.6vw,25px); line-height:1.08; font-weight:600; }
.promo-postit__ir{ margin-top:8px; font-family:Montserrat,system-ui,sans-serif; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:2px solid #E9B949; padding-bottom:2px; }
@media (max-width:900px){
  .promo-postit{ right:14px; top:calc(var(--cab-c, 72px) + 26px); width:150px; padding:24px 12px 12px; }
  .promo-postit__tit{ font-size:28px; } .promo-postit__det{ font-size:19px; }
}
.promo-postit.promo-postit--fijo{ position:fixed; top:auto; z-index:956; transform-origin:50% 100%; width:clamp(160px,12.5vw,196px); padding:26px 14px 14px; }
.promo-postit--fijo .promo-postit__tit{ font-size:clamp(28px,2.2vw,36px); } .promo-postit--fijo .promo-postit__det{ font-size:clamp(19px,1.4vw,23px); }
html.con-menu .promo-postit--fijo{ visibility:hidden; }
@media (max-width:900px){ .promo-postit.promo-postit--fijo{ width:128px; padding:20px 10px 10px; } .promo-postit--fijo .promo-postit__tit{ font-size:24px; } .promo-postit--fijo .promo-postit__det{ font-size:16px; } .promo-postit--fijo .promo-postit__ir{ font-size:10.5px; } }
.promo-postit.promo-postit--movil{ top:auto; left:auto; right:12px; bottom:calc(8px + env(safe-area-inset-bottom)); width:200px; padding:10px 8px 5px; gap:0; transform-origin:50% 100%; }
.promo-postit--movil .promo-postit__cinta{ width:52px; height:15px; margin-left:-26px; top:-8px; }
.promo-postit--movil .promo-postit__tit{ font-size:20px; } .promo-postit--movil .promo-postit__det{ font-size:14px; line-height:1.05; white-space:nowrap; } .promo-postit--movil .promo-postit__ir{ margin-top:2px; font-size:9.5px; }
@media (prefers-reduced-motion:reduce){ .promo-postit{ transition:none; } }

.promo-globo{
  position:fixed; right:18px; bottom:calc(92px + env(safe-area-inset-bottom)); z-index:955;
  max-width:min(290px, calc(100vw - 36px)); display:flex; align-items:flex-start; gap:6px;
  padding:12px 10px 12px 16px; border-radius:16px 16px 4px 16px; background:#fff; color:#10254F;
  font:500 14px/1.35 Montserrat,system-ui,sans-serif; box-shadow:0 14px 34px -10px rgba(6,42,77,.45);
  opacity:0; transform:translateY(10px) scale(.96); transform-origin:100% 100%; transition:opacity .3s ease, transform .35s cubic-bezier(.3,1.4,.5,1); pointer-events:none;
}
.promo-globo{ visibility:hidden; overflow-wrap:anywhere; }
.promo-globo.sale{ opacity:1; transform:none; pointer-events:auto; visibility:visible; }
.promo-globo::after{ content:""; position:absolute; right:26px; bottom:-8px; width:16px; height:16px; background:#fff; transform:rotate(45deg); border-radius:2px; }
.promo-globo__ir{ color:inherit; text-decoration:none; }
.promo-globo__ir strong{ font-weight:800; }
.promo-globo__mas{ display:inline-block; margin-left:4px; font-weight:700; border-bottom:2px solid #E9B949; }
.promo-globo__x{ flex:0 0 auto; width:26px; height:26px; margin:-4px -2px 0 0; border:0; border-radius:50%; background:transparent; color:#5a6a8a; font-size:20px; line-height:1; cursor:pointer; }
.promo-globo__x:hover{ background:#f1f3f8; }
@media (prefers-reduced-motion:reduce){ .promo-globo{ transition:none; } }
.promo-globo.promo-globo--quieto{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px); }

/* En celular y tableta vertical el globo nunca se muestra (solo el post-it dentro del hero del Home), aunque la pantalla se angoste después de que apareció. */
@media (max-width: 900px){ .promo-globo{ display:none !important; } }