/* PagePeel Banner (Joomla 5+) - base styles
 * Signature: Gorart V – huellasdigitales.cl
 * Rebuild: 2025-12-27
 */

.pp-wrap{
  position: fixed;
  /* small corner default spacing (a touch more margin so it doesn't "pegue" al borde) */
  top: calc(var(--pp-offset-top, 18px) + env(safe-area-inset-top, 0px));
  right: calc(var(--pp-offset-right, 18px) + env(safe-area-inset-right, 0px));
  left: auto;
  z-index: 9999;
  width: var(--pp-small, 100px);
  height: var(--pp-small, 100px);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.pp-wrap[data-side="left"],
.pp-wrap.pagepeel-lt{
  left: calc(var(--pp-offset-left, 18px) + env(safe-area-inset-left, 0px));
  right: auto;
}

.pp-wrap .pagepeel-link{
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
  cursor:pointer;
}

.pp-wrap .pagepeel-small,
.pp-wrap .pagepeel-big{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
}

.pp-wrap .pp-frame{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius: var(--pp-radius, 0px);
  border: var(--pp-border, 0px) solid var(--pp-border-color-small, #fff);
  box-shadow: var(--pp-shadow-small, 0 0 0 rgba(0,0,0,0));
  background: transparent;
}

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

/* Small corner "image" as background layer (prevents 3rd party zoom plugins on <img>) */
.pp-wrap .pagepeel-small .pp-thumb{
  width:100%;
  height:100%;
  display:block;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

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

/* Video/iframe support (big panel) */
.pp-wrap .pagepeel-big .pp-iframe,
.pp-wrap .pagepeel-big .pp-video{
  width:100%;
  height:100%;
  display:block;
  border:0;
  border-radius:inherit;
}

/* Wrapper for iframes (e.g., YouTube) so we can place optional overlays */
.pp-wrap .pagepeel-big .pp-iframe-wrap{
  position:relative;
  width:100%;
  height:100%;
  display:block;
}

/*
  YouTube UI shields
  -----------------
  We cannot remove "Watch on YouTube" inside the iframe. What we CAN do is place
  a transparent overlay above that corner so accidental clicks don't send users away.
  These shields are optional and are designed to NOT block fullscreen/controls.
*/
.pp-wrap .pagepeel-big .pp-yt-shield{ display:none; }

.pp-wrap .pagepeel-big .pp-iframe-wrap.pp-is-youtube .pp-yt-shield{
  position:absolute;
  z-index:30;
  pointer-events:none;
}

/* Bottom-left badge area (desktop by default; optional on mobile via parameter) */
.pp-wrap .pagepeel-big .pp-iframe-wrap.pp-is-youtube .pp-yt-shield-bl{
  display:block;
  left:0;
  bottom:0;
  width:220px;
  height:56px;
  background: transparent;
  border-top-right-radius: var(--pp-ytshield-radius, 14px);
  pointer-events:auto;
}

/* Keep these disabled to avoid blocking YouTube controls */
.pp-wrap .pagepeel-big .pp-iframe-wrap.pp-is-youtube .pp-yt-shield-top,
.pp-wrap .pagepeel-big .pp-iframe-wrap.pp-is-youtube .pp-yt-shield-br{
  display:none;
}

/* Raw iframe wrappers: keep content inside the frame */
.pp-wrap .pagepeel-big .pp-embed{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
}
.pp-wrap .pagepeel-big .pp-embed iframe,
.pp-wrap .pagepeel-big .pp-embed video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
  border-radius:inherit;
}

.pp-wrap .pp-cta{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  color: var(--pp-cta-color1, var(--pp-cta-color, #fff));
  background: var(--pp-cta-bg, rgba(0,0,0,0.55));
  font-size: var(--pp-cta-size, 12px);
  line-height:1.05;
  padding: var(--pp-cta-pady, 2px) var(--pp-cta-padx, 6px);
  border-radius: var(--pp-cta-radius, 8px);
  white-space: normal;
  letter-spacing: 0.3px;
  font-weight: 800;
  text-transform: uppercase;
  user-select:none;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 1px;
}

.pp-wrap .pp-cta .pp-cta-line1{ color: var(--pp-cta-color1, var(--pp-cta-color, #fff)); }
.pp-wrap .pp-cta .pp-cta-line2{ color: var(--pp-cta-color2, #fff); font-weight: 700;
  color: var(--pp-cta2-sub-color, var(--pp-cta2-color, #fff)); }

.pp-wrap[data-cta-pos="overlay_top"] .pp-cta{ top: 8px; bottom:auto; }
.pp-wrap[data-cta-pos="overlay_center"] .pp-cta{ top: 50%; bottom:auto; transform: translate(-50%,-50%); }
.pp-wrap[data-cta-pos="overlay_bottom"] .pp-cta{ bottom: 8px; top:auto; }

/* Big panel */
.pp-wrap .pagepeel-big{
  width: var(--pp-big-w, 500px);
  height: var(--pp-big-h, 500px);
  opacity:0;
  transform-origin: top right;
  transform: translate(0,0) scale(0.1);
  pointer-events:none;
  transition: opacity 300ms ease, transform 300ms ease;
}

/* Prevent "white flash" while an iframe/video is booting */
.pp-wrap .pagepeel-big .pp-frame{
  background: #000;
}

.pp-wrap.pp-loading .pagepeel-big .pp-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.65);
  z-index:2;
}
.pp-wrap.pp-loading .pagepeel-big .pp-frame::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:38px;
  height:38px;
  margin:-19px 0 0 -19px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,0.35);
  border-top-color: rgba(255,255,255,0.95);
  animation: ppSpin 900ms linear infinite;
  z-index:3;
}

@keyframes ppSpin{ to{ transform: rotate(360deg);} }

.pp-wrap[data-side="left"] .pagepeel-big,
.pp-wrap.pagepeel-lt .pagepeel-big{
  transform-origin: top left;
}

.pp-wrap.is-open .pagepeel-big{
  opacity:1;
  transform: translate(0,0) scale(1);
  pointer-events:auto;
}

.pp-wrap.is-open{
  width: var(--pp-big-w, 500px);
  height: var(--pp-big-h, 500px);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
}

/*
 * Video mode: when the big panel opens, keep it centered to avoid desborde
 * on mobile vertical/horizontal and in desktop.
 * (Small button still stays in the chosen corner when closed.)
 */

/* =========================
 * Video open animation options (lightweight)
 * ========================= */
.pp-wrap[data-content-type="video"]{ --pp-video-anim-dur: 260ms; }

/* Fade: only opacity (very light, ideal for móviles modestos) */
.pp-wrap[data-content-type="video"].pp-video-anim-fade .pagepeel-big{
  transform: translate3d(0,0,0) scale(1);
  transition: opacity var(--pp-video-anim-dur) ease;
  will-change: opacity;
}
.pp-wrap[data-content-type="video"].pp-video-anim-fade.is-open .pagepeel-big{ opacity:1; }

/* Scale: subtle zoom-in */
.pp-wrap[data-content-type="video"].pp-video-anim-scale .pagepeel-big{
  transform: translate3d(0,0,0) scale(0.92);
  transition: opacity var(--pp-video-anim-dur) ease, transform var(--pp-video-anim-dur) ease;
  will-change: transform, opacity;
}
.pp-wrap[data-content-type="video"].pp-video-anim-scale.is-open .pagepeel-big{
  opacity:1;
  transform: translate3d(0,0,0) scale(1);
}

/* Diagonal: from abajo-derecha hacia el centro (puede sentirse más "pesado") */
.pp-wrap[data-content-type="video"].pp-video-anim-diag .pagepeel-big{
  transform: translate3d(80px, 80px, 0) scale(0.98);
  transition: opacity var(--pp-video-anim-dur) ease, transform var(--pp-video-anim-dur) cubic-bezier(.2,.9,.2,1);
  will-change: transform, opacity;
}
.pp-wrap[data-content-type="video"].pp-video-anim-diag.is-open .pagepeel-big{
  opacity:1;
  transform: translate3d(0,0,0) scale(1);
}

/* None: instant */
.pp-wrap[data-content-type="video"].pp-video-anim-none .pagepeel-big{
  transition: none !important;
  transform: translate3d(0,0,0) scale(1);
}

.pp-wrap[data-content-type="video"].is-open{
  top: 50% !important;
  left: 50% !important;
  right: auto;
  transform: translate(-50%, -50%) !important;
  /* Prefer aspect ratio sizing for embeds (prevents "thumbnail zoom/crop" feel) */
  width: min(var(--pp-big-w, 560px), calc(100vw - 16px));
  height: auto;
  aspect-ratio: var(--pp-video-ratio, 16 / 9);
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
}

/* Prevent white flash while iframe loads */
.pp-wrap .pagepeel-big .pp-frame{ background: #000; }

.pp-wrap[data-content-type="video"].is-open .pagepeel-big,
.pp-wrap[data-content-type="video"].is-open .pagepeel-small{
  width: 100%;
  height: 100%;
}

/* Extra safety: on some móviles, opacity transitions on the small image may leave it visible.
   Force-hide the small layer when the video panel is open. */
.pp-wrap[data-content-type="video"].is-open .pagepeel-small{
  display:none !important;
}

.pp-wrap.is-open .pagepeel-small{
  opacity:0;
  transition: opacity 180ms ease;
  pointer-events:none;
}

.pp-wrap.is-open .pagepeel-big .pp-frame{
  border-color: var(--pp-border-color-big, #fff);
  box-shadow: var(--pp-shadow-big, 0 0 0 rgba(0,0,0,0));
}

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

/* CTA2 (big) */
.pp-wrap .pp-cta-big,
.pp-wrap .pp-cta-bigwrap{
  position:absolute;
  left:50%;
  bottom: var(--pp-cta2-bottom, 10px);
  top: var(--pp-cta2-top, auto);
  right: var(--pp-cta2-right, auto);
  transform: var(--pp-cta2-transform, translateX(-50%));
  color: var(--pp-cta2-color, #fff);
  background: var(--pp-cta2-bg, rgba(0,0,0,0.55));
  font-size: var(--pp-cta2-size, 12px);
  padding: var(--pp-cta2-pady, 3px) var(--pp-cta2-padx, 8px);
  border-radius: var(--pp-cta2-radius, 10px);
  text-align: var(--pp-cta2-textalign, center);
  max-width: var(--pp-cta2-maxw, 92%);
  box-sizing: border-box;
  user-select:none;
  pointer-events:none;
  z-index: 4;
}

/* One-time click-gate (iframe players): first click hides CTA2, then it removes itself */
.pp-wrap .pp-clickgate{
  position:absolute;
  inset:0;
  z-index:3;
  background: transparent;
  cursor: pointer;
}

/* Premium "caption box" should be centered over the video (like the old behavior) */
.pp-wrap .pp-cta2-premium{
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

/* CTA2 should be visible when the panel opens (invite the click).
   Hide it ONLY once playback/interaction starts (pp-playing), not just on open. */
.pp-wrap.pp-playing .pp-cta-big,
.pp-wrap.pp-playing .pp-cta-bigwrap{
  opacity:0;
  transition: opacity 160ms ease;
}

.pp-wrap .pp-cta-bigwrap{
  display:flex;
  flex-direction:column;
  gap: 2px;
}

.pp-wrap .pp-cta-big-title{
  font-size: var(--pp-cta2-title-size, 13px);
  font-weight: 900;
  color: var(--pp-cta2-title-color, var(--pp-cta2-color, #fff));
  letter-spacing: .2px;
  opacity:0;
  transform: translateY(6px);
  animation: ppFadeUp 420ms ease forwards;
  animation-delay: var(--pp-cta2-delay-title, 120ms);
}

.pp-wrap .pp-cta-big-sub{
  font-size: var(--pp-cta2-sub-size, 12px);
  font-weight: 700;
  color: var(--pp-cta2-sub-color, var(--pp-cta2-color, #fff));
  opacity:0;
  transform: translateY(6px);
  animation: ppFadeUp 420ms ease forwards;
  animation-delay: var(--pp-cta2-delay-sub, 260ms);
}


.pp-wrap .pp-cta-big-third{
  font-size: var(--pp-cta2-third-size, 11px);
  font-weight: 700;
  color: var(--pp-cta2-third-color, var(--pp-cta2-color, #fff));
  opacity:0;
  transform: translateY(6px);
  animation: ppFadeUp 420ms ease forwards;
  animation-delay: var(--pp-cta2-delay-third, 420ms);
}

@keyframes ppFadeUp{
  to{ opacity:1; transform: translateY(0); }
}

/* Hide in mobile landscape (JS toggles .pp-hidden) */
.pp-wrap.pp-hidden{ display:none !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .pp-wrap .pagepeel-big,
  .pp-wrap .pp-cta-big-title,
  .pp-wrap .pp-cta-big-sub{
    transition:none !important;
    animation:none !important;
  }
}


/* Close button for video/embed */
.pp-wrap .pp-close{
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  z-index:5;
  background: rgba(0,0,0,0.55);
  color:#fff;
  font-size:22px;
  line-height:34px;
  text-align:center;
}
.pp-wrap .pp-close:hover{ background: rgba(0,0,0,0.75); }
.pp-wrap:not(.is-open) .pp-close{ display:none; }


@media (max-width: 768px){
  .pp-wrap .pagepeel-big{ height: var(--pp-big-h-m, var(--pp-big-h, 500px)); }
}

.pp-wrap .pp-fallback{ position:absolute; left:10px; bottom:10px; z-index:4; font-size:12px; }
.pp-wrap .pp-fallback a{ background: rgba(0,0,0,0.55); color:#fff; padding:6px 10px; border-radius:999px; text-decoration:none; display:inline-block; }
.pp-wrap .pp-fallback a:hover{ background: rgba(0,0,0,0.75); }

.pp-wrap .pp-unavailable{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px;
  font-size:14px;
  line-height:1.35;
  color:#f0f0f0;
  background: rgba(0,0,0,0.55);
  border-radius: var(--pp-radius, 14px);
}


/* Mobile fine-tuning (optional) */
@media (max-width: 768px){
  .pp-wrap.is-open{
    width: var(--pp-big-w-m, var(--pp-big-w, 90vw));
    height: var(--pp-big-h-m, var(--pp-big-h, 60vh));
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
}


/* Intro fly-in (from center to corner) */
.pp-wrap.pp-flyin-right.pp-flyin-run{
  animation: ppFlyInRight var(--pp-flyin-dur, 700ms) ease both;
}
.pp-wrap.pp-flyin-left.pp-flyin-run{
  animation: ppFlyInLeft var(--pp-flyin-dur, 700ms) ease both;
}
@keyframes ppFlyInRight{
  from{ top:50%; left:50%; right:auto; transform:translate(-50%,-50%) scale(0.75); opacity:0; }
  to{ top: calc(var(--pp-offset-top, 18px) + env(safe-area-inset-top, 0px));
      right: calc(var(--pp-offset-right, 18px) + env(safe-area-inset-right, 0px));
      left:auto;
      transform:translate(0,0) scale(1); opacity:1; }
}
@keyframes ppFlyInLeft{
  from{ top:50%; left:50%; right:auto; transform:translate(-50%,-50%) scale(0.75); opacity:0; }
  to{ top: calc(var(--pp-offset-top, 18px) + env(safe-area-inset-top, 0px));
      left: calc(var(--pp-offset-left, 18px) + env(safe-area-inset-left, 0px));
      right:auto;
      transform:translate(0,0) scale(1); opacity:1; }
}

/* --- YouTube badge masking (optional) ---
   Note: YouTube may enforce overlays like "Watch on YouTube". This CSS only covers a small area (bottom-left).
*/
.pp-iframe-wrap.pp-yt-mask{
  position: relative;
}
.pp-iframe-wrap.pp-yt-mask::after{
  content: "";
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 150px;
  height: 44px;
  background: rgba(0,0,0,0.90);
  border-radius: var(--pp-ytmask-radius, 14px);
  pointer-events: none;
  z-index: 5;
}



/* YouTube badge cover label (optional) */
.pp-iframe-wrap{ position: relative; }
.pp-yt-badge-label{
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 6;
  /* micro-ajuste: sube levemente el texto para equilibrar visualmente el fondo */
  padding: 9px 18px 11px 18px;
  line-height: 1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  background: var(--pp-ytlb-bg, rgba(0,0,0,0.88));
  color: var(--pp-ytlb-color, #fff);
  border-radius: var(--pp-ytlb-radius, 10px);
  pointer-events: none;
  /* un poco más ancho para tapar por completo cualquier texto del badge debajo */
  min-width: 200px;
  max-width: 240px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
@media (max-width: 767px){
  .pp-yt-badge-label.pp-hide-mobile{ display:none; }
  .pp-iframe-wrap.pp-yt-mask.pp-hide-mobile::after{ display:none; }
}

/* If label is active, disable the old "mask blob" */
.pp-iframe-wrap.pp-yt-mask.pp-yt-label-on::after{
  display:none;
}



/* YouTube badge click shield (blocks clicks on the bottom-left "Watch on YouTube" badge without adding any visible blob) */
.pp-wrap .pagepeel-big .pp-iframe-wrap.pp-is-youtube .pp-yt-shield-bl{
  display:block !important;
  position:absolute;
  left:0;
  bottom:0;
  width:180px;
  height:64px;
  z-index:35;
  pointer-events:auto;
  background:transparent;
}

/* Keep other shields non-intrusive by default */
.pp-wrap .pagepeel-big .pp-iframe-wrap.pp-is-youtube .pp-yt-shield-top,
.pp-wrap .pagepeel-big .pp-iframe-wrap.pp-is-youtube .pp-yt-shield-br{
  pointer-events:none;
}


/* --- GVT fine tuning etiqueta LTS --- */
.pagevideo-etiqueta{
    transform: translateY(-3px);
    padding-left: 12px;
    padding-right: 14px;
    height: 30px;
    line-height: 30px;
    border-radius: 18px;
    box-sizing: border-box;
}

/* --- GVT LTS ocultar etiqueta al play --- */
.gvt-hide-etiqueta{
    opacity: 0 !important;
    pointer-events: none !important;
}

.pp-yt-badge-label{ transition: opacity .15s ease; }

/* --- GVT LTS: etiqueta YouTube se oculta al play (fade) --- */
.pp-yt-badge-label{
  transition: opacity .25s ease, transform .25s ease;
  will-change: opacity, transform;
}
.pp-hide-ytlabel .pp-yt-badge-label{
  opacity: 0 !important;
  transform: translateY(-4px);
  pointer-events: none !important;
}

/* --- GVT LTS: ocultar etiqueta YouTube (fade) --- */
.pp-yt-badge-label{
  transition: opacity .25s ease, transform .25s ease;
  will-change: opacity, transform;
}
.pp-ytlb-hide{
  opacity: 0 !important;
  transform: translateY(-4px);
  pointer-events: none !important;
}