/*
 * PagePeel Banner (Joomla 5+)
 * Signature: Gorart V – huellasdigitales.cl
 * Created:   2025-12-22
 */

.pagepeel-banner {
  position: fixed;
  top: var(--pp-offset-top, 12px);
  right: var(--pp-offset-right, 12px);
  z-index: 2147483000;
  width: var(--pp-small, 100px);
  height: var(--pp-small, 100px);
  pointer-events: none; /* do NOT block menus */
  --pp-speed-ms: 400ms;
  --pp-radius: 0px;
  --pp-border: 0px;
  --pp-border-color-small: #ffffff;
  --pp-border-color-big: #ffffff;
  --pp-shadow-small: 0 0 0 rgba(0,0,0,0);
  --pp-shadow-big: 0 0 0 rgba(0,0,0,0);
}


.pagepeel-banner[data-side="left"] {
  right: auto;
  left: var(--pp-offset-left, 12px);
}


.pagepeel-banner.pagepeel-lt {
  left: 0;
  right: auto;
  top: var(--pp-offset-top, 12px);
  left: var(--pp-offset-left, 12px);
}

/* Only the peel itself is clickable */
.pagepeel-banner .pagepeel-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.pagepeel-small,
.pagepeel-big {
  position: absolute;
  top: 0;
  right: 0;
}

.pagepeel-banner.pagepeel-lt .pagepeel-small,
.pagepeel-banner.pagepeel-lt .pagepeel-big {
  left: 0;
  right: auto;
}

.pagepeel-small {
  width: var(--pp-small, 100px);
  height: var(--pp-small, 100px);
  overflow: hidden;
}

.pagepeel-small img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Big peel (shown on hover/open) */
.pagepeel-big {
  width: var(--pp-big-w, 500px);
  height: var(--pp-big-h, 500px);
  opacity: 0;
  transform: scale(0.98);
  transform-origin: top right;
  transition: opacity var(--pp-speed-ms) ease, transform var(--pp-speed-ms) ease;
  pointer-events: none; /* prevent overlay from stealing clicks */
}

.pagepeel-banner.pagepeel-lt .pagepeel-big {
  transform-origin: top left;
}

/* PRO visual frame (applies to small + big) */
.pagepeel-small,
.pagepeel-big {
  overflow: visible; /* allow shadow/frame to be seen */
}

.pagepeel-small .pp-frame,
.pagepeel-big .pp-frame {
  position: relative; /* anchor for CTA label + border overlay */
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden; /* clip rounded corners */
  border-radius: var(--pp-radius, 0px);
  box-sizing: border-box;
  background: transparent;
}

/* Border overlay (does NOT shrink the image; avoids transparent gap) */
.pagepeel-small .pp-frame::after,
.pagepeel-big .pp-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: var(--pp-border, 0px) solid transparent;
  box-sizing: border-box;
}

.pagepeel-small .pp-frame::after { border-color: var(--pp-border-color-small, #ffffff); }
.pagepeel-big   .pp-frame::after { border-color: var(--pp-border-color-big,   #ffffff); }

/* Shadows */
.pagepeel-small .pp-frame { box-shadow: var(--pp-shadow-small); }
.pagepeel-big   .pp-frame { box-shadow: var(--pp-shadow-big); }

/* CTA label (small image) */
.pagepeel-small .pp-cta {
  position: absolute;
  pointer-events: none; /* never affect clicking */
  color: var(--pp-cta-color, #ffffff);
  background: var(--pp-cta-bg, rgba(0,0,0,0.55));
  font-size: var(--pp-cta-size, 12px);
  font-weight: 700;
  line-height: 1;
  padding: var(--pp-cta-pady, 2px) var(--pp-cta-padx, 6px);
  border-radius: var(--pp-cta-radius, 8px);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  max-width: calc(100% - 8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagepeel-banner[data-cta-pos="overlay_bottom"] .pagepeel-small .pp-cta {
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
}

.pagepeel-banner[data-cta-pos="overlay_top"] .pagepeel-small .pp-cta {
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
}

.pagepeel-banner[data-cta-pos="overlay_center"] .pagepeel-small .pp-cta {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* Footer description (big image) */
.pagepeel-big .pp-cta-big {
  position: absolute;
  pointer-events: none; /* never affect clicking */
  top: var(--pp-cta2-top, auto);
  right: var(--pp-cta2-right, auto);
  bottom: var(--pp-cta2-bottom, 8px);
  left: var(--pp-cta2-left, 50%);
  transform: var(--pp-cta2-transform, translateX(-50%));
  max-width: var(--pp-cta2-maxw, calc(100% - 16px));
  text-align: var(--pp-cta2-textalign, center);
  color: var(--pp-cta2-color, #ffffff);
  background: var(--pp-cta2-bg, rgba(0,0,0,0.55));
  font-size: var(--pp-cta2-size, 12px);
  font-weight: 600;
  line-height: 1.2;
  padding: var(--pp-cta2-pady, 3px) var(--pp-cta2-padx, 8px);
  border-radius: var(--pp-cta2-radius, 10px);
  letter-spacing: 0.2px;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

/* Two-line footer description (big image) */
.pagepeel-big .pp-cta-bigwrap {
  position: absolute;
  pointer-events: none; /* never affect clicking */
  top: var(--pp-cta2-top, auto);
  right: var(--pp-cta2-right, auto);
  bottom: var(--pp-cta2-bottom, 8px);
  left: var(--pp-cta2-left, 50%);
  transform: var(--pp-cta2-transform, translateX(-50%));
  max-width: var(--pp-cta2-maxw, calc(100% - 16px));
  text-align: var(--pp-cta2-textalign, center);
  color: var(--pp-cta2-color, #ffffff);
  background: var(--pp-cta2-bg, rgba(0,0,0,0.55));
  font-size: var(--pp-cta2-size, 12px);
  font-weight: 600;
  line-height: 1.15;
  padding: var(--pp-cta2-pady, 3px) var(--pp-cta2-padx, 8px);
  border-radius: var(--pp-cta2-radius, 10px);
  letter-spacing: 0.2px;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

.pagepeel-banner[data-cta2-align="left"] .pagepeel-big .pp-cta-bigwrap {
  left: 8px;
  right: auto;
  transform: none;
  text-align: left;
}

.pagepeel-banner[data-cta2-align="right"] .pagepeel-big .pp-cta-bigwrap {
  left: auto;
  right: 8px;
  transform: none;
  text-align: right;
}

.pagepeel-big .pp-cta-big-title {
  display: block;
  font-size: var(--pp-cta2-title-size, 13px);
  font-weight: 800;
  line-height: 1.15;
}

.pagepeel-big .pp-cta-big-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--pp-cta2-sub-size, 12px);
  font-weight: 600;
  line-height: 1.2;
  opacity: 0.95;
}

/* Staggered appearance (independent from peel) */
.pagepeel-banner[data-cta2-anim="1"] .pagepeel-big .pp-cta-big-title,
.pagepeel-banner[data-cta2-anim="1"] .pagepeel-big .pp-cta-big-sub {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.pagepeel-banner[data-cta2-anim="1"] .pagepeel-big .pp-cta-big-title {
  transition-delay: var(--pp-cta2-delay-title, 120ms);
}

.pagepeel-banner[data-cta2-anim="1"] .pagepeel-big .pp-cta-big-sub {
  transition-delay: var(--pp-cta2-delay-sub, 260ms);
}

.pagepeel-banner[data-cta2-align="left"] .pagepeel-big .pp-cta-big {
  left: 8px;
  right: auto;
  transform: none;
  text-align: left;
}

.pagepeel-banner[data-cta2-align="right"] .pagepeel-big .pp-cta-big {
  left: auto;
  right: 8px;
  transform: none;
  text-align: right;
}

.pagepeel-big .pp-frame {
  border-color: var(--pp-border-color-big, #ffffff);
  box-shadow: var(--pp-shadow-big);
}

.pagepeel-small img,
.pagepeel-big img {
  display: block;
  width: 100%;
  height: 100%;
  /* The big peel is auto-sized to the image ratio, so cover won't crop.
     For the small peel (square), cover looks better than letterboxing. */
  object-fit: cover;
}
/* Desktop hover */
@media (hover: hover) and (pointer: fine) {
  /* Expand the hover/click area so the big peel doesn't disappear when cursor moves onto it */
  .pagepeel-banner:hover {
    width: var(--pp-big-w, 500px);
    height: var(--pp-big-h, 500px);
  }

  .pagepeel-banner:hover .pagepeel-link {
    width: var(--pp-big-w, 500px);
    height: var(--pp-big-h, 500px);
  }

  .pagepeel-banner:hover .pagepeel-big {
    opacity: 1;
    transform: scale(1);
  }

  /* Staggered text reveal when big peel is visible (desktop hover) */
  .pagepeel-banner:hover[data-cta2-anim="1"] .pagepeel-big .pp-cta-big-title,
  .pagepeel-banner:hover[data-cta2-anim="1"] .pagepeel-big .pp-cta-big-sub {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile / touch open state */
.pagepeel-banner.pp-open {
  width: var(--pp-big-w, 500px);
  height: var(--pp-big-h, 500px);
}

.pagepeel-banner.pp-open .pagepeel-link {
  width: var(--pp-big-w, 500px);
  height: var(--pp-big-h, 500px);
}

.pagepeel-banner.pp-open .pagepeel-big {
  opacity: 1;
  transform: scale(1);
}

/* Staggered text reveal when big peel is visible (touch open) */
.pagepeel-banner.pp-open[data-cta2-anim="1"] .pagepeel-big .pp-cta-big-title,
.pagepeel-banner.pp-open[data-cta2-anim="1"] .pagepeel-big .pp-cta-big-sub {
  opacity: 1;
  transform: translateY(0);
}

/* Optional entrance animation */
.pagepeel-banner.pp-entrance {
  opacity: 0;
  transform: translate3d(0,0,0);
  transition: opacity 300ms ease, transform 700ms ease;
}

.pagepeel-banner.pp-entrance.pp-enter-run {
  opacity: 1;
}

.pagepeel-banner.pp-entrance.pp-enter-center-left {
  transform: translate3d(-35vw, 0, 0) scale(0.96);
}

/* Diagonal entrance from center-ish toward the corner */
.pagepeel-banner.pp-entrance.pp-enter-center-diag {
  transform: translate3d(-35vw, 35vh, 0) scale(0.96);
}

.pagepeel-banner.pagepeel-lt.pp-entrance.pp-enter-center-diag {
  transform: translate3d(35vw, 35vh, 0) scale(0.96);
}

.pagepeel-banner.pp-entrance.pp-enter-bottom {
  transform: translate3d(0, 35vh, 0) scale(0.96);
}

.pagepeel-banner.pp-entrance.pp-enter-run {
  transform: translate3d(0, 0, 0) scale(1);
}


/* Premium layout for the big caption box (optional) */
.pagepeel-banner[data-cta2-premium="1"] .pagepeel-big .pp-cta-big.pp-cta2-premium,
.pagepeel-banner[data-cta2-premium="1"] .pagepeel-big .pp-cta-bigwrap.pp-cta2-premium {
  bottom: 14px;
  max-width: calc(100% - 28px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 12px 28px rgba(0,0,0,0.30);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ===== Premium: Layout presets for the big box =====
   A) preset_a: classic footer (default) -> already covered by base rules
   B) preset_b: corner ribbon
   C) preset_c: center plate (premium)
*/

/* B) Corner ribbon */
.pp-layout-preset_b .pagepeel-big .pp-cta-big,
.pp-layout-preset_b .pagepeel-big .pp-cta-bigwrap {
    border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;}

.pp-layout-preset_b.pagepeel-lt .pagepeel-big .pp-cta-big,
.pp-layout-preset_b.pagepeel-lt .pagepeel-big .pp-cta-bigwrap {
  left: 10px;
  right: auto;
}

/* C) Center plate */
.pp-layout-preset_c .pagepeel-big .pp-cta-big,
.pp-layout-preset_c .pagepeel-big .pp-cta-bigwrap {
    text-align: center;
  padding: calc(var(--pp-cta2-pady, 3px) + 6px) calc(var(--pp-cta2-padx, 8px) + 10px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 12px 30px rgba(0,0,0,0.34);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);}

.pp-layout-preset_c .pagepeel-big .pp-cta-big-title {
  font-weight: 900;
}

.pp-layout-preset_c .pagepeel-big .pp-cta-big-sub {
  opacity: 0.98;
}

/* Frequency control: hide whole module (JS adds .pp-suppressed) */
.pp-wrap.pp-suppressed {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide PagePeel on mobile/tablet when device is in landscape (prevents covering videos) */
@media (orientation: landscape) and (max-width: 1024px) {
  .pp-wrap.pp-hide-landscape {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}