/* REVISTA DIGITAL (visor propio de PDF): portafolio-de-servicios-creasotol.php + assets/js/revista-pdf.js.
   El PDF se dibuja con PDF.js alojado en el sitio (assets/js/pdfjs), sin recursos de otros sitios web. */

/* cabecera de la página: botón de descarga a la izquierda y botones de compartir a la derecha */
.portafolio-cabecera {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 28px;}
.portafolio-compartir-pie {display: flex; justify-content: center; margin-top: 34px;}

/* botones de compartir (mismo estilo de los del blog) */
.compartir-portafolio {display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; position: relative;}
.compartir-portafolio--centrado {flex-direction: column; text-align: center;}
.compartir-portafolio__titulo {margin: 0; font-weight: 700; font-size: 16px; color: #1c2b39;}
.compartir-portafolio__lista {display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none;}
.compartir-portafolio--centrado .compartir-portafolio__lista {justify-content: center;}
.compartir-portafolio__boton {display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 0; color: #fff; font-size: 17px; cursor: pointer; text-decoration: none; transition: transform .2s, box-shadow .2s, filter .2s;}
.compartir-portafolio__boton:hover, .compartir-portafolio__boton:focus-visible {color: #fff; transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, .2); filter: brightness(1.08);}
.compartir-portafolio__boton i {margin: 0; transform: none;}
.compartir-portafolio__boton svg {fill: #fff;}
.compartir-portafolio__boton--whatsapp {background: #25d366;}
.compartir-portafolio__boton--facebook {background: #1877f2;}
.compartir-portafolio__boton--x {background: #000;}
.compartir-portafolio__boton--linkedin {background: #0a66c2;}
.compartir-portafolio__boton--telegram {background: #229ed9;}
.compartir-portafolio__boton--correo {background: #5c6b78;}
.compartir-portafolio__boton--copiar {background: var(--color-1);}
.compartir-portafolio__boton--nativo {background: var(--color2);}
.compartir-portafolio__aviso {position: absolute; top: 100%; right: 0; margin-top: 6px; font-size: 14px; color: #1e8e3e; white-space: nowrap;}
.compartir-portafolio--centrado .compartir-portafolio__aviso {position: static; min-height: 20px; margin-top: 0;}

/* visor */
.revista {position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #0f1630; box-shadow: 0 18px 50px rgba(15, 22, 48, .28); outline: 0; -webkit-user-select: none; user-select: none;}
.revista__escenario {position: relative; height: 640px; min-height: 320px; background: radial-gradient(ellipse at 50% 35%, #2a3a72 0%, #172046 45%, #0c1228 100%);}
.revista__visor {position: absolute; inset: 0; overflow: hidden; touch-action: pan-y;}
.revista--zoom .revista__visor {overflow: auto; touch-action: auto; cursor: grab;}
.revista--zoom .revista__visor.arrastrando {cursor: grabbing;}
.revista__lienzo {display: flex; align-items: center; justify-content: center; min-width: 100%; min-height: 100%;}
.revista__libro {position: relative; flex: none; perspective: 2600px; transition: transform .7s cubic-bezier(.645, .045, .355, 1); cursor: pointer;}
.revista--zoom .revista__libro {cursor: inherit;}

.revista__pagina {position: absolute; top: 0; bottom: 0; width: 50%; background: #fff; overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .45);}
.revista__pagina--izq {left: 0; border-radius: 4px 0 0 4px;}
.revista__pagina--der {right: 0; border-radius: 0 4px 4px 0;}
.revista--sencilla .revista__pagina--izq {display: none;}
.revista--sencilla .revista__pagina--der {width: 100%; border-radius: 4px;}
.revista__pagina.vacia {visibility: hidden;}
.revista__pagina img, .revista__cara img {display: block; width: 100%; height: 100%; -webkit-user-drag: none; pointer-events: none;}
.revista__pagina img:not([src]), .revista__cara img:not([src]) {visibility: hidden;}
/* enlaces del PDF, con clic encima de la página (revista-pdf.js > "enlaces de cada página") */
.revista__enlaces {position: absolute; inset: 0; z-index: 2; pointer-events: none;}
.revista__enlace {position: absolute; display: block; border-radius: 3px; pointer-events: auto; cursor: pointer; transition: background .2s, box-shadow .2s;}
.revista__enlace:hover, .revista__enlace:focus-visible {background: rgba(43, 181, 230, .22); box-shadow: 0 0 0 2px rgba(43, 181, 230, .55);}
/* mientras se dibuja una página: brillo de espera */
.revista__pagina.cargando::after {content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, #f1f3f8 30%, #fff 50%, #f1f3f8 70%); background-size: 200% 100%; animation: revista-brillo 1.2s linear infinite;}
/* sombra del lomo, en el centro del libro abierto */
.revista__pagina--izq::before, .revista__pagina--der::before {content: ""; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 1; pointer-events: none;}
.revista__pagina--izq::before {right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0));}
.revista__pagina--der::before {left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0));}
.revista--sencilla .revista__pagina--der::before {display: none;}

/* hoja que pasa */
.revista__hoja {position: absolute; top: 0; bottom: 0; width: 50%; z-index: 5; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.645, .045, .355, 1); will-change: transform;}
.revista__hoja--adelante {left: 50%; transform-origin: left center;}
.revista__hoja--atras {left: 0; transform-origin: right center;}
.revista__cara {position: absolute; inset: 0; background: #fff; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);}
.revista__cara--dorso {transform: rotateY(180deg);}
.revista__cara::after {content: ""; position: absolute; inset: 0; pointer-events: none;}
.revista__hoja--adelante .revista__cara--frente::after, .revista__hoja--atras .revista__cara--dorso::after {background: linear-gradient(to right, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 12%);}
.revista__hoja--adelante .revista__cara--dorso::after, .revista__hoja--atras .revista__cara--frente::after {background: linear-gradient(to left, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 12%);}
/* una sola página (celular): la hoja se desliza */
.revista__hoja--sencilla {left: 0; width: 100%; transition: transform .45s ease, opacity .45s ease;}
.revista__hoja--sencilla .revista__cara {border-radius: 4px;}
.revista__hoja--sencilla .revista__cara::after {display: none;}

/* flechas laterales */
.revista__flecha {position: absolute; top: 50%; z-index: 20; width: 46px; height: 46px; margin-top: -23px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, transform .2s, opacity .2s;}
.revista__flecha:hover {background: var(--color2); transform: scale(1.08);}
.revista__flecha:disabled {opacity: .25; pointer-events: none;}
.revista__flecha--ant {left: 12px;}
.revista__flecha--sig {right: 12px;}

/* carga y error */
.revista__carga {position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; color: #fff; background: radial-gradient(ellipse at 50% 35%, #2a3a72 0%, #172046 45%, #0c1228 100%); transition: opacity .4s;}
.revista__carga[hidden] {display: none;}
.revista__carga.oculta {opacity: 0; pointer-events: none;}
.revista__carga p {margin: 0; color: #fff; font-size: 16px;}
.revista__carga-icono {width: 46px; height: 46px; border: 4px solid rgba(255, 255, 255, .2); border-top-color: var(--color2); border-radius: 50%; animation: revista-giro .9s linear infinite;}
.revista__carga-barra {width: min(260px, 70%); height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .18); overflow: hidden;}
.revista__carga-barra span {display: block; width: 0; height: 100%; border-radius: 6px; background: var(--color2); transition: width .3s;}
.revista__error .revista__carga-icono, .revista__error .revista__carga-barra {display: none;}
.revista__error a {color: #fff; text-decoration: underline; font-weight: 600;}

/* barra de controles */
.revista__barra {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; background: #0b1024; color: #fff;}
.revista__grupo {display: flex; align-items: center; gap: 6px;}
.revista__grupo + .revista__grupo {padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .16);}
.revista__boton {width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background .2s, transform .2s, opacity .2s;}
.revista__boton:hover, .revista__boton:focus-visible {background: var(--color2); color: #fff; transform: translateY(-2px);}
.revista__boton:disabled {opacity: .3; pointer-events: none;}
.revista__boton i {margin: 0; transform: none;}
.revista__paginas {min-width: 96px; text-align: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;}
.revista__zoom {min-width: 46px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums;}
.revista__deslizador {width: 190px; accent-color: var(--color2); cursor: pointer;}

/* pantalla completa (y su respaldo donde el navegador no la permite, Ej: iPhone) */
.revista:fullscreen {border-radius: 0; width: 100%; height: 100%;}
.revista:fullscreen .revista__escenario, .revista--maximizada .revista__escenario {flex: 1; height: auto !important;}
.revista--maximizada {position: fixed; inset: 0; z-index: 2147483647; border-radius: 0;}

@keyframes revista-giro {to {transform: rotate(360deg);}}
@keyframes revista-brillo {to {background-position: -200% 0;}}

@media (max-width: 767px) {
  .portafolio-cabecera {justify-content: center;}
  .compartir-portafolio {justify-content: center;}
  .compartir-portafolio__aviso {position: static; width: 100%; text-align: center;}
  .revista {border-radius: 14px;}
  .revista__flecha {width: 38px; height: 38px; margin-top: -19px; font-size: 15px;}
  .revista__flecha--ant {left: 6px;}
  .revista__flecha--sig {right: 6px;}
  .revista__deslizador {width: 120px;}
  .revista__grupo--extremos {display: none;}
}
@media (prefers-reduced-motion: reduce) {
  .revista__hoja, .revista__libro {transition: none !important;}
}