/* Segunda pasada visual: paneles contextuales, publicidad dinámica y cierre del libro. */
.topbar { box-shadow: 0 1px 0 #fff inset; }
.brand img { width: 50px; height: 42px; border-radius: 0; object-fit: contain; box-shadow: none; }
.brand-title { font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.workspace { grid-template-columns: clamp(180px, 15vw, 232px) minmax(0, 1fr) clamp(220px, 20vw, 300px); }
.side-panel { padding: 22px 18px; background: rgba(250, 249, 246, .97); }
.sponsor-panel { background: linear-gradient(180deg, #f4f1ec, #faf9f6); }
.media-panel { padding-inline: 20px; background: #faf9f6; }
.panel-heading { font-size: 20px; line-height: 1.1; }
.panel-copy { margin-bottom: 18px; }
.book-frame { position: relative; z-index: 2; display: block; overflow: visible; }
.book-frame.cover-hidden { visibility: hidden; pointer-events: none; }
.book-area { transform: none !important; }
.single-page-overlay { position: absolute; left: 50%; top: 50%; z-index: 3; display: none; width: 600px; height: 600px; object-fit: contain; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 18px 46px #251e2e38; }
.single-page-overlay.visible { display: block; }
.spread-page-overlay { position: absolute; left: 50%; top: 50%; z-index: 3; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); transform: translate(-50%, -50%); background: #fff; box-shadow: 0 18px 46px #251e2e38; }
.spread-page-overlay.visible { display: grid; }
.spread-page-overlay img { display: block; width: 100%; height: 100%; object-fit: contain; }
.spread-page-overlay img + img { border-left: 1px solid #28222f14; }
.spread-page-overlay.portrait { grid-template-columns: 1fr; }
.spread-page-overlay.portrait #rightPageImage { display: none; }

.sponsor-list { gap: 12px; }
.sponsor-card {
  --ad-color: rgba(35, 26, 43, .92);
  min-height: 194px;
  padding: 0;
  border: 1px solid #fff8;
  border-radius: 20px;
  justify-content: space-between;
  isolation: isolate;
  background-image: linear-gradient(180deg, rgba(18, 13, 23, .12), var(--ad-color)), var(--ad-image);
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 30px #30263824;
}
.sponsor-card::before { content: ""; inset: 0; z-index: -1; opacity: .55; background: radial-gradient(circle at 85% 10%, #fff8, transparent 35%); }
.sponsor-card.gold { --ad-color: rgba(116, 70, 16, .95); }
.sponsor-card.coral { --ad-color: rgba(174, 48, 66, .94); }
.sponsor-card.blue { --ad-color: rgba(20, 54, 108, .95); }
.sponsor-card.violet { --ad-color: rgba(62, 35, 91, .95); }
.sponsor-card.red { --ad-color: rgba(148, 24, 28, .95); }
.sponsor-card.lime { --ad-color: rgba(58, 92, 35, .95); }
.sponsor-category { position: relative; padding: 13px 14px; color: #fff; font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.sponsor-content { position: relative; display: flex; flex-direction: column; padding: 34px 14px 15px; background: linear-gradient(transparent, #0007); }
.sponsor-card .sponsor-content strong { font-size: 18px; line-height: 1.12; }
.sponsor-card .sponsor-content small { margin-top: 6px; color: #ffffffe0; font-size: 11px; line-height: 1.35; }
.sponsor-card .sponsor-content em { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.sponsor-card .sponsor-content b { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #ffffff24; }

.podcast-section[hidden] { display: none; }
.podcast-section { padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.media-player-shell { padding: 9px; border: 0; background: #efede8; }
.media-placeholder { min-height: 86px; background: transparent; }
.podcast-list { max-height: 224px; overflow: auto; padding-right: 2px; }
.podcast-button { border: 0; background: #fff; box-shadow: 0 2px 10px #251e2e0c; }
.podcast-button:hover:not(:disabled), .podcast-button.active { box-shadow: 0 0 0 1px #1db95466, 0 5px 16px #1db95417; }
.context-section { margin-top: 0; padding-top: 0; border-top: 0; }
.podcast-section:not([hidden]) + .context-section { margin-top: 20px; }
.context-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.context-empty { margin: 11px 0 0; padding: 14px; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); background: #fff8; font-size: 11px; }
.context-empty[hidden] { display: none; }
.context-link {
  position: relative; overflow: hidden;
  width: 100%; min-height: 58px; padding: 9px 11px; border: 1px solid rgba(36, 32, 44, .08); border-radius: 16px;
  display: grid; grid-template-columns: 35px minmax(0, 1fr) 20px; gap: 9px; align-items: center;
  color: #29232f; background: linear-gradient(135deg, #fff, #fbfaf7); box-shadow: 0 8px 22px #271f3012; text-align: left;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.context-link::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); opacity: 0; transform: translateX(-35%); transition: opacity .15s var(--ease), transform .2s var(--ease); }
.context-link:hover { color: inherit; border-color: rgba(250,114,93,.28); transform: translateY(-2px); box-shadow: 0 13px 30px #271f301e; }
.context-link:hover::after { opacity: 1; transform: translateX(35%); }
.link-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 12px; background: #28222f0d; font-size: 11px; font-weight: 850; box-shadow: inset 0 1px 0 rgba(255,255,255,.24); }
.link-copy { min-width: 0; }
.link-copy strong, .link-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-copy strong { font-size: 12.5px; }
.link-copy small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.link-arrow { justify-self: center; font-size: 20px; opacity: .55; }
.context-link.instagram { color: white; background: radial-gradient(circle at 17% 110%, #ffd600 0 18%, transparent 42%), radial-gradient(circle at 88% 8%, #7638fa 0 18%, transparent 38%), linear-gradient(135deg, #d6249f, #fd5949); }
.context-link.instagram .link-icon { background: #ffffff25; }.context-link.instagram .link-copy small { color: #ffffffc7; }
.context-link.phone { color: white; background: linear-gradient(135deg, #079b86, #23b798); }.context-link.phone .link-icon { background: #ffffff25; }.context-link.phone .link-copy small { color: #ffffffca; }
.context-link.email { color: white; background: linear-gradient(135deg, #554464, #746083); }.context-link.email .link-icon { background: #ffffff20; }.context-link.email .link-copy small { color: #ffffffc5; }
.context-link.sponsor { color: #2d2415; background: linear-gradient(135deg, #f6c957, #f1a738); }.context-link.sponsor .link-icon { background: #fff7; }.context-link.sponsor .link-copy small { color: #5b451d; }
.context-link.website { color: white; background: linear-gradient(135deg, #2f6672, #3b7888); }.context-link.website .link-icon { background: #ffffff20; }.context-link.website .link-copy small { color: #ffffffd2; }
.context-link.share { color: white; background: linear-gradient(135deg, #ef6d5a, #f49365); }.context-link.share .link-icon { background: #ffffff20; }.context-link.share .link-copy small { color: #ffffffd2; }
.context-link.page .link-icon { color: var(--coral); background: #fa725d14; }
.context-link:disabled { opacity: .55; cursor: default; transform: none; }

.subscription-modal { position: fixed; inset: 0; z-index: 120; padding: 20px; display: grid; place-items: center; background: rgba(24, 19, 29, .66); backdrop-filter: blur(10px); }
.subscription-modal[hidden] { display: none; }
.subscription-card { width: min(620px, 96vw); position: relative; overflow: hidden; padding: clamp(27px, 5vw, 46px); border: 1px solid #ffffffb8; border-radius: 28px; background: radial-gradient(circle at 100% 0, #52bed239, transparent 31%), radial-gradient(circle at 0 100%, #f7be423b, transparent 28%), #fffdf9; box-shadow: 0 30px 90px #0006; }
.subscription-card::before { content: ""; position: absolute; width: 190px; height: 190px; right: -75px; bottom: -95px; border-radius: 50%; background: linear-gradient(135deg, var(--coral), var(--yellow)); opacity: .86; }
.subscription-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; font-size: 21px; }
.subscription-kicker { color: var(--coral); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.subscription-card h2 { max-width: 460px; margin: 9px 0 10px; font-size: clamp(27px, 5vw, 43px); line-height: 1.03; letter-spacing: -.045em; }
.subscription-card > p { max-width: 480px; margin: 0 0 22px; color: var(--muted); }
.subscription-card form > label:first-child { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.subscription-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.subscription-field input { height: 48px; min-width: 0; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; background: white; font: inherit; outline: none; }
.subscription-field input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px #fa725d15; }
.subscription-field button { min-height: 48px; padding: 0 17px; border: 0; border-radius: 13px; background: #28222f; color: white; font-weight: 780; cursor: pointer; }
.subscription-consent { max-width: 510px; margin-top: 13px; display: flex; align-items: flex-start; gap: 7px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.subscription-consent input { margin-top: 2px; accent-color: var(--coral); }
.subscription-message { min-height: 17px; margin: 8px 0 0; color: #b23c34; font-size: 11px; }
.subscription-card > small { position: relative; display: block; margin-top: 18px; color: var(--muted); font-size: 9px; }.subscription-card > small a { color: inherit; }
.subscription-success { position: relative; padding: 18px 0; }.subscription-success[hidden] { display: none; }.subscription-success > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #23b798; color: white; font-size: 24px; }.subscription-success strong { display: block; margin-top: 14px; font-size: 23px; }.subscription-success p { margin: 4px 0; color: var(--muted); }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1181px) and (max-width: 1500px), (min-width: 1181px) and (max-height: 760px) {
  .side-panel { padding: 16px 12px; }
  .media-panel { padding-inline: 14px; }
  .viewer-stage { padding-inline: 28px; }
  .panel-heading { font-size: 17px; }
  .panel-copy { margin-bottom: 13px; font-size: 10px; }
  .sponsor-card { min-height: 166px; border-radius: 16px; }
  .sponsor-content { padding: 24px 12px 12px; }
  .sponsor-card .sponsor-content strong { font-size: 15px; }
  .context-link { min-height: 49px; grid-template-columns: 31px minmax(0, 1fr) 15px; gap: 7px; padding: 7px 8px; border-radius: 13px; }
  .link-icon { width: 31px; height: 31px; }
}
@media (max-width: 650px) {
  .subscription-field { grid-template-columns: 1fr; }
  .subscription-field button { width: 100%; }
  .subscription-card { border-radius: 22px; }
}

/* Flipbook activo y profundidad entre hojas */
.book-frame { width: 100%; height: 100%; display: grid; place-items: center; }
.book-area { position: relative; overflow: visible; }
.book-area::before { content: none; }
body[data-viewer-layout="spread"] .book-area::before { opacity: 0; }
#book { width: 100%; height: 100%; }
#book .stf__wrapper { margin: auto; }
#book .stf__item { background: #fff !important; box-shadow: none !important; }
#book .stf__item img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.edge-button {
  border: 0;
  outline: 0;
  box-shadow: 0 8px 24px rgba(34, 28, 42, .12);
}
.edge-button:focus,
.edge-button:focus-visible {
  outline: 0;
}
.single-page-overlay, .spread-page-overlay { z-index: 1; }

/* YouTube mini player */
.media-player-shell { position: relative; }
.youtube-open-link { margin-top: 8px; min-height: 34px; padding: 0 11px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: #c8191f; text-decoration: none; font-size: 11px; font-weight: 800; }
.youtube-open-link:hover { background: #a91419; color: #fff; }
.video-thumb { width: 42px; height: 32px; border-radius: 8px; display: grid; place-items: center; background-image: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.28)), var(--video-thumb); background-size: cover; background-position: center; overflow: hidden; }
.video-thumb span { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #d71920; font-size: 9px; box-shadow: 0 2px 8px #0005; }
.podcast-button { grid-template-columns: 42px minmax(0, 1fr) auto; }
.podcast-button:hover:not(:disabled), .podcast-button.active { box-shadow: 0 0 0 1px #d7192055, 0 5px 16px #d7192018; }
.play-dot { background: #d71920; }

/* Portada y CTA comercial */
.context-message { padding: 14px; border: 1px solid rgba(250,114,93,.18); border-radius: 14px; background: linear-gradient(180deg, #fff, #fff7f2); box-shadow: 0 4px 16px #271f300b; }
.context-message strong { display: block; color: #a23d32; font-size: 17px; line-height: 1.15; letter-spacing: -.015em; }
.context-message p { margin: 9px 0 0; color: #514957; font-size: 13px; line-height: 1.55; }
.sponsor-cta-slot { margin-top: 13px; }
.sponsor-cta-card { padding: 15px; border: 1px solid rgba(250,114,93,.28); border-radius: 16px; display: grid; gap: 6px; color: #2b2531; text-decoration: none; background: linear-gradient(135deg, #fff, #fff3e6); box-shadow: 0 8px 22px #271f3010; }
.sponsor-cta-card span { color: #a45d10; font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.sponsor-cta-card strong { font-size: 17px; line-height: 1.08; letter-spacing: -.025em; }
.sponsor-cta-card small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.sponsor-cta-card em { color: #b84635; font-style: normal; font-size: 11px; font-weight: 820; }
.sponsor-cta-card:hover { transform: translateY(-1px); box-shadow: 0 12px 28px #271f3018; }

/* Mejor contraste para el directorio social */
.context-link.instagram { color: white; border: 1px solid rgba(214,36,159,.18); background: radial-gradient(circle at 18% 110%, #ffd600 0 17%, transparent 40%), radial-gradient(circle at 92% 6%, #7638fa 0 18%, transparent 36%), linear-gradient(135deg, #d6249f, #fd5949); }
.context-link.instagram .link-icon { color: #fff; background: linear-gradient(135deg, #d6249f, #fd5949); }
.context-link.instagram .link-copy small { color: #ffffffd0; }
.context-link.youtube { color: white; background: linear-gradient(135deg, #c8191f, #e43d43); }
.context-link.youtube .link-icon { background: #ffffff25; }
.context-link.youtube .link-copy small { color: #ffffffcf; }

/* Portada y contraportada: una sola hoja centrada */
body[data-cover-page="true"] .single-page-overlay { z-index: 4; display: block; }
body[data-cover-page="true"] .book-frame.cover-hidden { visibility: hidden; pointer-events: none; }
body[data-cover-page="true"] .book-area::before { opacity: 0; }

/* Animación de apertura/cierre para portada y contraportada sin spread vacío */
.single-page-overlay.cover-animating {
  z-index: 7;
  display: block;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  box-shadow: 0 22px 58px rgba(32, 26, 39, .34);
}
.single-page-overlay.cover-flip-front-open {
  transform-origin: left center;
  animation: coverFrontOpen .7s cubic-bezier(.2,.75,.25,1) forwards;
}
.single-page-overlay.cover-flip-front-close {
  transform-origin: left center;
  animation: coverFrontClose .7s cubic-bezier(.2,.75,.25,1) forwards;
}
.single-page-overlay.cover-flip-back-close {
  transform-origin: right center;
  animation: coverBackClose .7s cubic-bezier(.2,.75,.25,1) forwards;
}
.single-page-overlay.cover-flip-back-open {
  transform-origin: right center;
  animation: coverBackOpen .7s cubic-bezier(.2,.75,.25,1) forwards;
}
@keyframes coverFrontOpen {
  0% { transform: translate(-50%, -50%) rotateY(0deg); opacity: 1; filter: brightness(1); }
  55% { filter: brightness(.94); }
  100% { transform: translate(-82%, -50%) rotateY(-108deg); opacity: .18; filter: brightness(.86); }
}
@keyframes coverFrontClose {
  0% { transform: translate(-82%, -50%) rotateY(-108deg); opacity: .18; filter: brightness(.86); }
  100% { transform: translate(-50%, -50%) rotateY(0deg); opacity: 1; filter: brightness(1); }
}
@keyframes coverBackClose {
  0% { transform: translate(-18%, -50%) rotateY(108deg); opacity: .18; filter: brightness(.86); }
  100% { transform: translate(-50%, -50%) rotateY(0deg); opacity: 1; filter: brightness(1); }
}
@keyframes coverBackOpen {
  0% { transform: translate(-50%, -50%) rotateY(0deg); opacity: 1; filter: brightness(1); }
  100% { transform: translate(-18%, -50%) rotateY(108deg); opacity: .18; filter: brightness(.86); }
}

/* v12: PageFlip real con portada/contraportada recortadas en reposo */
body[data-cover-page="true"] .single-page-overlay,
body[data-cover-page="flipping"] .single-page-overlay {
  display: none !important;
  animation: none !important;
}
body[data-cover-page="true"] .book-frame {
  width: var(--cover-page-size);
  height: var(--cover-page-height);
  overflow: hidden;
  display: block;
  visibility: visible;
  pointer-events: auto;
}
body[data-cover-page="true"] .book-area {
  width: var(--cover-spread-size) !important;
  height: var(--cover-page-height) !important;
  overflow: visible;
}
body[data-viewer-layout="spread"][data-cover-page="true"][data-cover-side="front"] .book-area {
  transform: translateX(calc(var(--cover-page-size) * -1)) !important;
}
body[data-viewer-layout="spread"][data-cover-page="true"][data-cover-side="back"] .book-area {
  transform: translateX(0) !important;
}
body[data-cover-page="true"] .book-area::before,
body[data-cover-page="flipping"] .book-area::before {
  opacity: 0;
}
body[data-cover-page="flipping"] .book-frame {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: grid;
}
body[data-cover-page="flipping"] .book-area {
  transform: none !important;
}

/* v14: recorte visual sin cambiar el tamaño real del canvas PageFlip */
body[data-cover-page="true"] .book-frame {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body[data-cover-page="true"] .book-area {
  width: var(--cover-spread-size) !important;
  height: var(--cover-page-height) !important;
  transform: none !important;
}
body[data-viewer-layout="spread"][data-cover-page="true"][data-cover-side="front"] .book-frame {
  clip-path: inset(0 0 0 50%);
  transform: translateX(calc(var(--cover-page-size) * -.5));
}
body[data-viewer-layout="spread"][data-cover-page="true"][data-cover-side="back"] .book-frame {
  clip-path: inset(0 50% 0 0);
  transform: translateX(calc(var(--cover-page-size) * .5));
}
body[data-viewer-layout="portrait"][data-cover-page="true"] .book-frame,
body[data-cover-page="flipping"] .book-frame {
  clip-path: none;
  transform: none;
}
body[data-cover-page="flipping"] .book-area {
  width: var(--cover-spread-size) !important;
  height: var(--cover-page-height) !important;
  transform: none !important;
}

/* v19: anular desplazamiento heredado del área en portada */
body[data-viewer-layout="spread"][data-cover-page="true"][data-cover-side="front"] .book-area,
body[data-viewer-layout="spread"][data-cover-page="true"][data-cover-side="back"] .book-area {
  transform: none !important;
}

.ui-button.copied { border-color: rgba(35,183,152,.42); background: #eaf8f4; color: #116b5b; }

/* v30: enlaces sobrios y reproductor de audio */
.context-link,
.context-link.instagram,
.context-link.website,
.context-link.share,
.context-link.youtube,
.context-link.phone,
.context-link.email,
.context-link.sponsor {
  color: #fff;
  border-color: rgba(33, 14, 49, .2);
  background: #210E31;
  box-shadow: 0 10px 24px rgba(33, 14, 49, .18);
}
.context-link:hover,
.context-link.instagram:hover,
.context-link.website:hover,
.context-link.share:hover,
.context-link.youtube:hover,
.context-link.phone:hover,
.context-link.email:hover,
.context-link.sponsor:hover {
  color: #fff;
  border-color: rgba(33, 14, 49, .42);
  background: #2b1541;
  box-shadow: 0 14px 32px rgba(33, 14, 49, .24);
}
.context-link .link-icon,
.context-link.instagram .link-icon,
.context-link.website .link-icon,
.context-link.share .link-icon,
.context-link.youtube .link-icon,
.context-link.phone .link-icon,
.context-link.email .link-icon,
.context-link.sponsor .link-icon {
  color: #210E31;
  background: rgba(255, 255, 255, .92);
}
.context-link .link-copy small,
.context-link.instagram .link-copy small,
.context-link.website .link-copy small,
.context-link.share .link-copy small,
.context-link.youtube .link-copy small,
.context-link.phone .link-copy small,
.context-link.email .link-copy small,
.context-link.sponsor .link-copy small {
  color: rgba(255, 255, 255, .72);
}
/* v31: directorio, previews y CTA fijo */
.context-link,
.context-link.website,
.context-link.share,
.context-link.youtube,
.context-link.phone,
.context-link.email,
.context-link.sponsor {
  color: #fff;
  border-color: rgba(33, 14, 49, .2);
  background: #210E31;
  box-shadow: 0 10px 24px rgba(33, 14, 49, .18);
}
.context-link:hover,
.context-link.website:hover,
.context-link.share:hover,
.context-link.youtube:hover,
.context-link.phone:hover,
.context-link.email:hover,
.context-link.sponsor:hover {
  color: #fff;
  border-color: rgba(33, 14, 49, .42);
  background: #2b1541;
  box-shadow: 0 14px 32px rgba(33, 14, 49, .24);
}
.context-link.instagram:not(.custom-color) {
  color: #fff;
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(135deg, #833ab4 0%, #c13584 42%, #fd1d1d 72%, #fcb045 100%);
  box-shadow: 0 12px 28px rgba(193, 53, 132, .22);
}
.context-link.instagram:not(.custom-color):hover {
  color: #fff;
  background: linear-gradient(135deg, #6f2aa0 0%, #b42d79 44%, #e7192a 76%, #eca13b 100%);
}
.context-link.custom-color {
  color: #fff;
  border-color: color-mix(in srgb, var(--link-color) 75%, white 25%);
  background: linear-gradient(135deg, var(--link-color), var(--link-color-2));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--link-color) 28%, transparent);
}
.context-link.custom-color:hover {
  color: #fff;
  filter: brightness(.96);
  background: linear-gradient(135deg, var(--link-color), var(--link-color-2));
}
.context-link .link-icon,
.context-link.instagram .link-icon,
.context-link.website .link-icon,
.context-link.share .link-icon,
.context-link.youtube .link-icon,
.context-link.phone .link-icon,
.context-link.email .link-icon,
.context-link.sponsor .link-icon,
.context-link.custom-color .link-icon {
  color: #210E31;
  background: rgba(255, 255, 255, .94);
}
.context-link .link-copy small,
.context-link.instagram .link-copy small,
.context-link.website .link-copy small,
.context-link.share .link-copy small,
.context-link.youtube .link-copy small,
.context-link.phone .link-copy small,
.context-link.email .link-copy small,
.context-link.sponsor .link-copy small,
.context-link.custom-color .link-copy small {
  color: rgba(255, 255, 255, .76);
}
.podcast-button.preview-only {
  cursor: pointer;
}
.video-thumb.blurred {
  position: relative;
  isolation: isolate;
}
.video-thumb.blurred::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--video-thumb);
  background-size: cover;
  background-position: center;
  filter: blur(2px) saturate(.95);
  transform: scale(1.08);
}
.video-thumb.blurred {
  background-image: linear-gradient(rgba(33,14,49,.2), rgba(33,14,49,.48));
}
.email-cta-card {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 16px;
  padding: 15px;
  border: 1px solid rgba(33,14,49,.12);
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, #f7f2fb);
  box-shadow: 0 -4px 24px rgba(33,14,49,.08), 0 14px 32px rgba(33,14,49,.12);
}
.email-cta-card span {
  color: #8b5e18;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.email-cta-card strong {
  display: block;
  margin-top: 5px;
  color: #210E31;
  font-size: 17px;
  line-height: 1.08;
}
.email-cta-card p {
  margin: 7px 0 12px;
  color: #5d5367;
  font-size: 11px;
  line-height: 1.4;
}
.email-cta-card button {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #210E31;
  font-weight: 820;
  cursor: pointer;
}
.email-cta-card button:hover { background: #2b1541; }
/* v32: refinamientos finales */
.sponsor-card {
  --ad-color: #210E31;
  --ad-color-2: #5b3a72;
  min-height: 176px;
  border: 1px solid rgba(255,255,255,.62);
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.34), transparent 30%),
    linear-gradient(145deg, var(--ad-color), color-mix(in srgb, var(--ad-color-2) 82%, #000 18%));
  background-image:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.34), transparent 30%),
    linear-gradient(145deg, var(--ad-color), color-mix(in srgb, var(--ad-color-2) 82%, #000 18%)) !important;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--ad-color) 25%, transparent);
}
.sponsor-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .45;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  filter: blur(10px);
}
.sponsor-content { background: linear-gradient(transparent, rgba(0,0,0,.22)); }
.sponsor-card .sponsor-content b { background: rgba(255,255,255,.2); }
.sponsor-cta-card { background: linear-gradient(135deg, #210E31, #4b246a); color: #fff; border-color: rgba(255,255,255,.28); }
.sponsor-cta-card span, .sponsor-cta-card small, .sponsor-cta-card em { color: rgba(255,255,255,.82); }
.sponsor-cta-card strong { color: #fff; }
.context-link .link-icon svg,
.video-thumb svg,
.play-dot svg {
  width: 20px;
  height: 20px;
  display: block;
}
.context-link .link-icon { font-size: 0; }
.context-link.instagram:not(.custom-color) .link-icon { color: #c13584; background: #fff; }
.context-link.website:not(.custom-color) .link-icon,
.context-link.sponsor:not(.custom-color) .link-icon { color: #210E31; }
.context-link.phone .link-icon { color: #0a7c68; }
.context-link.email .link-icon { color: #554464; }
.context-link.share .link-icon { color: #ef6d5a; }
.podcast-section { border-bottom: 0; padding-bottom: 16px; }
.podcast-section .panel-copy { margin-bottom: 12px; }
.podcast-button.preview-only { grid-template-columns: 58px minmax(0, 1fr) auto; min-height: 64px; }
.podcast-button.preview-only .video-thumb { width: 58px; height: 42px; border-radius: 10px; }
.podcast-button.preview-only .video-thumb span { width: 28px; height: 28px; font-size: 0; }
.context-section .panel-heading { margin-bottom: 12px; }
.email-cta-card form { display: grid; gap: 8px; margin-top: 12px; }
.email-cta-card input {
  width: 100%;
  height: 42px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid rgba(33,14,49,.14);
  border-radius: 12px;
  background: #fff;
  color: #210E31;
  font: inherit;
  outline: none;
}
.email-cta-card input:focus { border-color: #210E31; box-shadow: 0 0 0 3px rgba(33,14,49,.1); }
.email-cta-card button { min-height: 42px; padding: 0 12px; }
.sidebar-subscription-message { min-height: 16px; margin: 8px 0 0; color: #5d5367; font-size: 10px; line-height: 1.35; }
.footer-credit {
  justify-self: end;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  text-align: right;
}
.footer-credit a { color: #210E31; font-weight: 850; text-decoration: none; }
.footer-credit a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .top-actions { gap: 5px; }
  .top-actions .ui-button { min-width: 36px; padding-inline: 9px; }
}
/* v33: panel derecho compacto, videos con más aire y crédito limpio */
.media-panel {
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.podcast-list {
  max-height: min(52vh, 430px);
  overflow: auto;
  padding-right: 0;
}
.podcast-button.preview-only {
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 68px;
  padding: 9px 10px;
  gap: 9px 10px;
}
.podcast-button.preview-only .video-thumb {
  width: 52px;
  height: 38px;
}
.podcast-button.preview-only .video-thumb span {
  width: 25px;
  height: 25px;
}
.podcast-button.preview-only .pending-badge {
  grid-column: 2;
  justify-self: start;
  margin-top: -6px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #7b2630;
  background: rgba(215, 25, 32, .08);
  font-size: 8px;
  font-weight: 800;
}
.context-actions.compact {
  gap: 6px;
}
.context-actions.compact .context-link {
  min-height: 43px;
  grid-template-columns: 29px minmax(0, 1fr) 14px;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 13px;
}
.context-actions.compact .link-icon {
  width: 29px;
  height: 29px;
  border-radius: 10px;
}
.context-actions.compact .link-icon svg {
  width: 17px;
  height: 17px;
}
.context-actions.compact .link-copy strong {
  font-size: 11px;
}
.context-actions.compact .link-copy small {
  margin-top: 0;
  font-size: 8px;
}
.context-actions.compact .link-arrow {
  font-size: 17px;
}
.email-cta-card {
  position: static;
  margin-top: auto;
  padding: 12px;
  border-radius: 16px;
}
.email-cta-card strong {
  font-size: 15px;
  line-height: 1.1;
}
.email-cta-card form {
  gap: 7px;
  margin-top: 10px;
}
.email-cta-card input,
.email-cta-card button {
  height: 36px;
  min-height: 36px;
  border-radius: 11px;
}
.footer-credit {
  display: block;
  white-space: nowrap;
  letter-spacing: 0;
}
@media (max-height: 820px) and (min-width: 1181px) {
  .context-actions:not(.compact) .context-link {
    min-height: 50px;
  }
  .email-cta-card {
    padding: 11px;
  }
}
.form-honeypot { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }

/* v37: feedback visual de Formspark */
.email-cta-card.form-submitting,
.subscription-card.form-submitting {
  opacity: .86;
}
.email-cta-card.form-submitted {
  border-color: rgba(35, 183, 152, .36);
  background: linear-gradient(135deg, #ffffff, #eefaf6);
  animation: formPulse .42s ease-out;
}
.email-cta-card.form-error {
  border-color: rgba(178, 60, 52, .32);
  background: linear-gradient(135deg, #ffffff, #fff1f0);
}
.subscription-card.form-submitted .subscription-success {
  animation: formRise .42s ease-out both;
}
.subscription-card.form-error {
  box-shadow: 0 30px 90px #0006, 0 0 0 3px rgba(178, 60, 52, .12) inset;
}
.sidebar-subscription-message,
.subscription-message {
  transition: color .18s ease, transform .18s ease;
}
.form-submitted .sidebar-subscription-message,
.subscription-card.form-submitted .subscription-message {
  color: #15735f;
}
.form-error .sidebar-subscription-message,
.subscription-card.form-error .subscription-message {
  color: #b23c34;
  animation: formShake .28s ease-out;
}
@keyframes formPulse {
  0% { transform: scale(.985); }
  100% { transform: scale(1); }
}
@keyframes formRise {
  0% { opacity: 0; transform: translateY(12px) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes formShake {
  0%, 100% { transform: translateX(0); }
  33% { transform: translateX(-3px); }
  66% { transform: translateX(3px); }
}
/* v39: confirmación positiva del formulario fijo */
.form-target-frame {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.sidebar-subscription-success {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  color: #15735f;
  animation: formRise .42s ease-out both;
}
.sidebar-subscription-success[hidden] { display: none; }
.sidebar-subscription-success span {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #23b798;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(35,183,152,.28);
}
.sidebar-subscription-success strong {
  margin: 0;
  color: #15735f;
  font-size: 14px;
  line-height: 1.05;
}
.sidebar-subscription-success small {
  color: #4f756b;
  font-size: 10px;
  line-height: 1.25;
}
/* v43: flujo mobile completo con publicidad y enlaces visibles */
@media (max-width: 760px) {
  html,
  body {
    height: auto;
    min-height: 100%;
  }

  body {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    background: #dfdbd4;
  }

  .topbar {
    position: sticky;
    top: 0;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brand {
    max-width: none;
  }

  .brand-title {
    max-width: clamp(108px, 34vw, 190px);
  }

  #openSponsors,
  #openMedia {
    display: none;
  }

  .top-actions {
    flex: 0 0 auto;
  }

  .workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .side-panel {
    position: static;
    z-index: auto;
    width: auto;
    max-height: none;
    overflow: visible;
    transform: none;
    box-shadow: none;
    transition: none;
  }

  .sponsor-panel {
    order: 1;
    padding: 13px 12px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .viewer-stage {
    order: 2;
    height: clamp(420px, 66svh, 560px);
    min-height: 420px;
    padding: 12px 6px;
  }

  .media-panel {
    order: 3;
    padding: 16px 12px max(18px, env(safe-area-inset-bottom));
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .panel-close {
    display: none;
  }

  .sponsor-panel .panel-kicker,
  .sponsor-panel .panel-heading,
  .sponsor-panel .panel-copy {
    display: none;
  }

  .sponsor-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 74vw);
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }

  .sponsor-card {
    min-height: 128px;
    border-radius: 15px;
    scroll-snap-align: start;
  }

  .sponsor-category {
    padding: 10px 12px;
    font-size: 8px;
  }

  .sponsor-content {
    padding: 18px 12px 12px;
  }

  .sponsor-card .sponsor-content strong {
    font-size: 15px;
  }

  .sponsor-card .sponsor-content small,
  .sponsor-card .sponsor-content em {
    font-size: 10px;
  }

  .sponsor-cta-slot {
    margin-top: 10px;
  }

  .sponsor-cta-card {
    min-height: 0;
    padding: 12px;
    border-radius: 14px;
  }

  .sponsor-cta-card strong {
    font-size: 15px;
  }

  .sponsor-cta-card small {
    font-size: 10px;
  }

  .context-section {
    margin-top: 0;
  }

  .context-actions {
    gap: 8px;
  }

  .context-link {
    min-height: 50px;
    border-radius: 14px;
  }

  .podcast-list {
    max-height: none;
  }

  .email-cta-card {
    margin-top: 16px;
  }

  .bottombar {
    position: sticky;
    bottom: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    padding: 9px 10px max(9px, env(safe-area-inset-bottom));
  }

  .page-status {
    min-width: 0;
  }

  .progress {
    width: 100%;
    max-width: none;
  }

  .nav-cluster {
    justify-self: center;
  }
}

@media (max-width: 380px) {
  .topbar {
    padding-inline: 8px;
  }

  .brand {
    gap: 7px;
  }

  .brand img {
    width: 32px;
    height: 32px;
  }

  .brand-title {
    max-width: 96px;
    font-size: 10px;
  }

  .top-actions {
    gap: 4px;
  }

  .top-actions .ui-button {
    min-width: 34px;
    width: 34px;
    min-height: 36px;
    padding-inline: 0;
  }

  .nav-button {
    width: 34px;
    height: 34px;
  }

  .nav-cluster {
    padding: 3px;
  }
}

/* v44: evitar que el footer mobile cubra la revista y compactar publicidad superior */
@media (max-width: 760px) {
  .sponsor-cta-slot {
    display: none;
  }

  .bottombar {
    position: static;
  }
}

/* v45: carrusel de patrocinadores sin barra visual en mobile */
@media (max-width: 760px) {
  .sponsor-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sponsor-list::-webkit-scrollbar {
    display: none;
  }
}

/* v46: mobile tipo visor, no landing. Base: 390x844, soporte 360x800 y landscape phone. */
@media (max-width: 760px), (max-width: 950px) and (max-height: 520px) {
  html,
  body {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  body {
    display: grid;
    grid-template-rows: 54px minmax(0, 1fr) 56px;
    background: #dfdbd4;
  }

  .topbar {
    position: static;
    height: 54px;
    padding: 0 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .brand {
    gap: 8px;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .brand-title {
    max-width: 142px;
    font-size: 11px;
    letter-spacing: .09em;
  }

  .edition,
  .button-text,
  #openSponsors,
  #openMedia {
    display: none !important;
  }

  .top-actions {
    gap: 5px;
  }

  .top-actions .ui-button {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 12px;
  }

  .workspace {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: 42px minmax(0, 1fr) 112px;
    background: #dfdbd4;
  }

  .side-panel {
    position: static;
    width: auto;
    min-height: 0;
    overflow: hidden;
    transform: none;
    box-shadow: none;
    transition: none;
  }

  .panel-close,
  .sponsor-panel .panel-kicker,
  .sponsor-panel .panel-heading,
  .sponsor-panel .panel-copy,
  .sponsor-cta-slot,
  .email-cta-card {
    display: none !important;
  }

  .sponsor-panel {
    order: 0;
    padding: 5px 8px;
    border-right: 0;
    border-bottom: 1px solid rgba(36,32,44,.08);
  }

  .sponsor-list {
    height: 32px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sponsor-list::-webkit-scrollbar {
    display: none;
  }

  .sponsor-card {
    flex: 0 0 auto;
    width: min(42vw, 164px);
    min-width: 128px;
    min-height: 0;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    display: grid;
    align-content: center;
    scroll-snap-align: start;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--ad-color) 18%, transparent);
  }

  .sponsor-category,
  .sponsor-card .sponsor-content small,
  .sponsor-card .sponsor-content em {
    display: none;
  }

  .sponsor-content {
    min-width: 0;
    padding: 0;
    background: none;
  }

  .sponsor-card .sponsor-content strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0;
  }

  .viewer-stage {
    order: 0;
    height: auto;
    min-height: 0;
    padding: 39px 3px 5px;
    overflow: hidden;
  }

  .mobile-zoom-cta {
    position: absolute;
    z-index: 12;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(33,14,49,.14);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #210E31;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 22px rgba(33,14,49,.16);
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
  }

  .mobile-zoom-cta svg {
    width: 16px;
    height: 16px;
  }

  .edge-button {
    width: 36px;
    height: 46px;
    border-radius: 14px;
  }

  #prev { left: 2px; }
  #next { right: 2px; }

  .media-panel {
    order: 0;
    padding: 6px 8px;
    border-left: 0;
    border-top: 1px solid rgba(36,32,44,.08);
    background: #faf9f6;
  }

  .podcast-section {
    max-height: 48px;
    padding: 0;
    overflow: hidden;
  }

  .podcast-section .panel-kicker,
  .podcast-section .panel-copy {
    display: none;
  }

  .podcast-section .panel-heading,
  .context-section .panel-heading {
    margin: 0 0 5px;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
  }

  .podcast-list {
    max-height: none;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .podcast-list::-webkit-scrollbar {
    display: none;
  }

  .podcast-button.preview-only {
    flex: 0 0 auto;
    width: 136px;
    min-height: 34px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 6px;
    padding: 4px 7px;
    border-radius: 999px;
  }

  .podcast-button.preview-only .video-thumb {
    width: 28px;
    height: 24px;
    border-radius: 8px;
  }

  .podcast-button.preview-only .pending-badge,
  .podcast-copy small {
    display: none;
  }

  .podcast-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
  }

  .context-section {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .podcast-section:not([hidden]) + .context-section {
    margin-top: 6px;
  }

  .context-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .context-actions::-webkit-scrollbar {
    display: none;
  }

  .context-link,
  .context-actions.compact .context-link {
    flex: 0 0 auto;
    width: 128px;
    min-height: 34px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(33,14,49,.14);
  }

  .context-link .link-icon,
  .context-actions.compact .link-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }

  .context-link .link-icon svg,
  .context-actions.compact .link-icon svg {
    width: 14px;
    height: 14px;
  }

  .link-copy strong,
  .context-actions.compact .link-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1.05;
  }

  .link-copy small,
  .link-arrow,
  .context-message,
  .context-empty {
    display: none !important;
  }

  .bottombar {
    position: static;
    min-height: 0;
    height: 56px;
    padding: 5px 8px max(5px, env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .page-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }

  .page-count {
    margin-top: 0;
    font-size: 10px;
  }

  .progress {
    width: 100%;
    margin-top: 4px;
  }

  .nav-cluster {
    justify-self: end;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
  }

  .nav-button {
    width: 32px;
    height: 32px;
    border-radius: 999px;
  }

  .nav-button svg {
    width: 15px;
    height: 15px;
  }

  .page-number,
  .footer-actions {
    display: none;
  }
}

@media (max-width: 360px) {
  .brand-title { max-width: 104px; }
  .top-actions .ui-button { width: 34px; min-width: 34px; }
  .workspace { grid-template-rows: 38px minmax(0, 1fr) 104px; }
  .viewer-stage { padding-top: 35px; }
  .mobile-zoom-cta { min-height: 28px; font-size: 10px; }
  .context-link, .context-actions.compact .context-link { width: 116px; }
}

/* v47: zoom mobile con controles y paneo por scroll */
.zoom-toolbar {
  position: fixed;
  z-index: 4;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(23,19,27,.78);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 36px rgba(0,0,0,.32);
}

.zoom-toolbar .ui-button {
  min-height: 34px;
  border-color: rgba(255,255,255,.22);
  color: #fff;
  background: rgba(255,255,255,.1);
}

.zoom-toolbar .ui-button.icon {
  width: 34px;
}

#zoomReset {
  min-width: 58px;
  padding-inline: 9px;
  font-size: 11px;
  font-weight: 850;
}

.zoom-overlay {
  overscroll-behavior: contain;
}

.zoom-pages {
  --zoom-scale: 1;
  width: max-content;
  min-width: 100%;
  padding-top: 10px;
}

.zoom-pages img {
  max-width: none;
  width: calc(min(88vh, 92vw) * var(--zoom-scale));
}

@media (max-width: 760px), (max-width: 950px) and (max-height: 520px) {
  .zoom-overlay {
    padding: 58px 0 18px;
  }

  .zoom-pages {
    align-items: flex-start;
    padding-inline: 10px;
  }

  .zoom-pages img {
    width: calc(94vw * var(--zoom-scale));
  }
}

/* v48: corregir controles del overlay de zoom */
.zoom-toolbar .zoom-close {
  position: static;
  top: auto;
  right: auto;
}

/* v49: landscape phone prioriza revista y zoom sin solapes */
@media (max-width: 950px) and (max-height: 520px) {
  body {
    grid-template-rows: 44px minmax(0, 1fr) 42px;
  }

  .topbar {
    height: 44px;
  }

  .brand img {
    width: 28px;
    height: 28px;
  }

  .brand-title {
    max-width: 180px;
    font-size: 10px;
  }

  .top-actions .ui-button {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .workspace {
    grid-template-rows: 30px minmax(0, 1fr) 0;
  }

  .sponsor-panel {
    padding: 3px 8px;
  }

  .sponsor-list,
  .sponsor-card {
    height: 24px;
  }

  .sponsor-card {
    width: 132px;
    min-width: 118px;
  }

  .sponsor-card .sponsor-content strong {
    font-size: 10px;
  }

  .viewer-stage {
    padding: 31px 3px 3px;
  }

  .mobile-zoom-cta {
    top: 3px;
    min-height: 26px;
    padding: 0 10px;
    font-size: 10px;
  }

  .media-panel {
    display: none;
  }

  .bottombar {
    height: 42px;
    padding: 4px 8px;
  }

  .page-count,
  .progress {
    display: none;
  }

  .nav-button {
    width: 28px;
    height: 28px;
  }

  .nav-cluster {
    padding: 2px;
  }
}

/* v50: reader grande predeterminado para pantallas menores a monitor grande */
.mobile-zoom-cta {
  display: none !important;
}

.zoom-overlay {
  background: rgba(16, 13, 20, .96);
}

.zoom-toolbar {
  max-width: calc(100vw - 24px);
  gap: 5px;
}

.zoom-page-status {
  min-width: 76px;
  padding: 0 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}

.zoom-edge {
  position: fixed;
  z-index: 3;
  top: 50%;
  width: 48px;
  height: 68px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  cursor: pointer;
  transform: translateY(-50%);
  font-size: 34px;
  line-height: 1;
}

.zoom-edge:hover:not(:disabled) {
  background: rgba(255,255,255,.2);
}

.zoom-edge:disabled {
  opacity: .28;
  cursor: default;
}

.zoom-edge-prev { left: 22px; }
.zoom-edge-next { right: 22px; }

.zoom-pages {
  align-items: flex-start;
  gap: 0;
  padding-inline: 72px;
  cursor: grab;
  perspective: 1800px;
  touch-action: pan-y;
  user-select: none;
  position: relative;
  transform-style: preserve-3d;
}

.zoom-pages.dragging {
  cursor: grabbing;
}

.zoom-pages img {
  -webkit-user-drag: none;
  transform-origin: center;
  will-change: transform, opacity;
}

.zoom-pages.dragging img {
  transition: none;
}

.zoom-pages.dragging.single img,
.zoom-pages.dragging.drag-next:not(.single) img:last-child {
  transform: translateX(var(--reader-drag-x, 0)) rotateY(-7deg);
  transform-origin: left center;
}

.zoom-pages.dragging.drag-prev:not(.single) img:first-child {
  transform: translateX(var(--reader-drag-x, 0)) rotateY(7deg);
  transform-origin: right center;
}

.zoom-pages .reader-page-flipping-source {
  visibility: hidden;
}

.reader-turn-sheet {
  position: absolute;
  z-index: 6;
  display: block;
  max-width: none !important;
  margin: 0 !important;
  pointer-events: none;
  object-fit: fill;
  backface-visibility: hidden;
  box-shadow: 0 18px 36px rgba(0,0,0,.34);
  will-change: transform, opacity, filter;
}

.reader-turn-sheet.reader-turn-next {
  animation: readerSheetTurnNext .46s cubic-bezier(.2,.62,.2,1) both;
  transform-origin: left center;
}

.reader-turn-sheet.reader-turn-prev {
  animation: readerSheetTurnPrev .46s cubic-bezier(.2,.62,.2,1) both;
  transform-origin: right center;
}

@keyframes readerSheetTurnNext {
  0% { opacity: 1; filter: brightness(1); transform: translateX(var(--reader-drag-x, 0)) rotateY(0deg) skewY(0deg); }
  45% { opacity: .94; filter: brightness(.9); transform: translateX(-22px) rotateY(-58deg) skewY(-1.2deg); }
  100% { opacity: .2; filter: brightness(.72); transform: translateX(-96px) rotateY(-112deg) skewY(-2deg); }
}

@keyframes readerSheetTurnPrev {
  0% { opacity: 1; filter: brightness(1); transform: translateX(var(--reader-drag-x, 0)) rotateY(0deg) skewY(0deg); }
  45% { opacity: .94; filter: brightness(.9); transform: translateX(22px) rotateY(58deg) skewY(1.2deg); }
  100% { opacity: .2; filter: brightness(.72); transform: translateX(96px) rotateY(112deg) skewY(2deg); }
}

.zoom-pages.single {
  width: 100%;
  justify-content: center;
}

.zoom-pages.single img {
  width: min(calc(100vw - 168px), calc(100vh - 126px));
}

@media (max-width: 2100px), (max-height: 1200px) {
  .zoom-overlay {
    padding: 74px 0 24px;
  }

  .zoom-pages img {
    width: calc(min(calc(100vw - 168px), calc(100vh - 126px)) * var(--zoom-scale));
  }
}

@media (max-width: 760px), (max-width: 950px) and (max-height: 520px) {
  .zoom-toolbar {
    top: max(8px, env(safe-area-inset-top));
    max-width: calc(100vw - 12px);
    gap: 3px;
    padding: 4px;
  }

  .zoom-toolbar .ui-button {
    min-height: 32px;
    border-radius: 999px;
  }

  .zoom-toolbar .ui-button.icon {
    width: 32px;
  }

  .zoom-page-status {
    min-width: 58px;
    padding: 0 5px;
    font-size: 10px;
  }

  #zoomReset {
    min-width: 48px;
    padding-inline: 6px;
    font-size: 10px;
  }

  .zoom-edge {
    width: 38px;
    height: 54px;
    border-radius: 15px;
    font-size: 28px;
  }

  .zoom-edge-prev { left: 8px; }
  .zoom-edge-next { right: 8px; }

  .zoom-pages {
    padding-inline: 10px;
  }

  .zoom-pages.single {
    justify-content: flex-start;
  }

  .zoom-pages.single img,
  .zoom-pages img {
    width: calc(94vw * var(--zoom-scale));
  }
}

/* v51: aplicar escala también cuando el reader muestra una sola página */
@media (max-width: 2100px), (max-height: 1200px) {
  .zoom-pages.single img {
    width: calc(min(calc(100vw - 168px), calc(100vh - 126px)) * var(--zoom-scale));
  }
}

@media (max-width: 760px), (max-width: 950px) and (max-height: 520px) {
  .zoom-pages.single img {
    width: calc(94vw * var(--zoom-scale));
  }
}

/* v52: controles de paginación completos en modo ampliado */
.zoom-toolbar .ui-button#zoomReaderFirst,
.zoom-toolbar .ui-button#zoomReaderLast {
  width: 40px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.08em;
}

@media (max-width: 760px), (max-width: 950px) and (max-height: 520px) {
  .zoom-toolbar .ui-button#zoomReaderFirst,
  .zoom-toolbar .ui-button#zoomReaderLast {
    width: 30px;
    min-width: 30px;
    font-size: 12px;
  }
}



/* v53: spreads visibles en reader ampliado web */
.zoom-pages:not(.single) {
  justify-content: center;
}

.zoom-pages:not(.single) img {
  width: calc(min(calc((100vw - 168px) / 2), calc(100vh - 126px)) * var(--zoom-scale));
}

@media (max-width: 760px), (max-width: 950px) and (max-height: 520px) {
  .zoom-pages:not(.single) {
    justify-content: flex-start;
  }

  .zoom-pages:not(.single) img {
    width: calc(94vw * var(--zoom-scale));
  }
}




body.zoom-open {
  overflow: hidden;
}
/* v54: reader ampliado sin scrollbars */
.zoom-overlay {
  --reader-toolbar-space: 82px;
  --reader-side-space: 136px;
  box-sizing: border-box;
  width: 100dvw;
  height: 100dvh;
  max-width: 100dvw;
  max-height: 100dvh;
  overflow: hidden !important;
  padding: var(--reader-toolbar-space) 0 14px !important;
}

.zoom-pages {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: calc(100dvh - var(--reader-toolbar-space) - 14px);
  max-height: calc(100dvh - var(--reader-toolbar-space) - 14px);
  padding: 0 68px !important;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.zoom-pages img,
.zoom-pages.single img,
.zoom-pages:not(.single) img {
  flex: 0 1 auto;
  max-width: none;
  max-height: 100%;
  width: calc(min(calc((100dvw - var(--reader-side-space)) / 2), calc(100dvh - var(--reader-toolbar-space) - 14px)) * var(--zoom-scale));
  height: auto;
}

.zoom-pages.single img {
  width: calc(min(calc(100dvw - var(--reader-side-space)), calc(100dvh - var(--reader-toolbar-space) - 14px)) * var(--zoom-scale));
}

@media (max-width: 760px), (max-width: 950px) and (max-height: 520px) {
  .zoom-overlay {
    --reader-toolbar-space: 48px;
    --reader-side-space: 20px;
    padding: var(--reader-toolbar-space) 0 8px !important;
  }

  .zoom-pages {
    height: calc(100dvh - var(--reader-toolbar-space) - 8px);
    max-height: calc(100dvh - var(--reader-toolbar-space) - 8px);
    padding: 0 10px !important;
    align-items: center;
    justify-content: center;
  }

  .zoom-pages img,
  .zoom-pages.single img,
  .zoom-pages:not(.single) img {
    width: calc(min(calc(100dvw - var(--reader-side-space)), calc(100dvh - var(--reader-toolbar-space) - 8px)) * var(--zoom-scale));
    max-height: 100%;
  }
}


/* v55: escritorio compacto, prioridad a la revista */
@media (min-width: 1181px) {
  body {
    grid-template-rows: 46px minmax(0, 1fr) 46px;
  }

  .topbar {
    height: 46px;
    padding: 0 14px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
  }

  .edition {
    display: none;
  }

  .brand {
    gap: 8px;
  }

  .brand img {
    width: 38px;
    height: 32px;
  }

  .brand-title {
    font-size: 11px;
    letter-spacing: .1em;
  }

  .top-actions {
    gap: 5px;
  }

  .top-actions .ui-button {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 10px;
  }

  .top-actions .button-text {
    display: none;
  }

  .top-actions .ui-button svg {
    width: 16px;
    height: 16px;
  }

  .workspace {
    grid-template-columns: clamp(142px, 9vw, 170px) minmax(0, 1fr) clamp(190px, 13vw, 245px);
  }

  .side-panel {
    padding: 10px 10px;
    scrollbar-width: thin;
  }

  .panel-kicker,
  .panel-copy {
    display: none;
  }

  .panel-heading {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.05;
  }

  .sponsor-list {
    gap: 8px;
  }

  .sponsor-card {
    min-height: 128px;
    border-radius: 13px;
  }

  .sponsor-category {
    padding: 9px 10px;
    font-size: 8px;
    line-height: 1.2;
  }

  .sponsor-content {
    padding: 20px 10px 10px;
  }

  .sponsor-card .sponsor-content strong {
    font-size: 13px;
    line-height: 1.08;
  }

  .sponsor-card .sponsor-content small {
    margin-top: 4px;
    font-size: 9px;
    line-height: 1.22;
  }

  .sponsor-card .sponsor-content em {
    margin-top: 8px;
    font-size: 9px;
  }

  .sponsor-card .sponsor-content b {
    width: 19px;
    height: 19px;
  }

  .media-panel {
    padding-inline: 10px;
  }

  .context-section {
    margin-top: 0;
  }

  .context-actions {
    gap: 7px;
  }

  .context-link {
    min-height: 42px;
    grid-template-columns: 28px minmax(0, 1fr) 14px;
    gap: 7px;
    padding: 6px 8px;
    border-radius: 11px;
  }

  .link-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  .link-copy strong {
    font-size: 10.5px;
  }

  .link-copy small {
    font-size: 8px;
  }

  .link-arrow {
    font-size: 17px;
  }

  .sidebar-subscription-card {
    margin-top: 16px;
    padding: 14px;
    border-radius: 14px;
  }

  .sidebar-subscription-card h3,
  .sidebar-subscription-card strong {
    font-size: 14px;
    line-height: 1.08;
  }

  .sidebar-subscription-card input,
  .sidebar-subscription-card button {
    min-height: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 11px;
  }

  .viewer-stage {
    padding: 8px 24px;
  }

  .edge-button {
    width: 34px;
    height: 48px;
    border-radius: 12px;
  }

  .edge-button svg {
    width: 17px;
    height: 17px;
  }

  #prev { left: 4px; }
  #next { right: 4px; }

  .bottombar {
    min-height: 46px;
    padding: 5px 14px max(5px, env(safe-area-inset-bottom));
    grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
    gap: 10px;
  }

  .page-label {
    font-size: 12px;
  }

  .page-count {
    display: none;
  }

  .progress {
    width: 120px;
    margin-top: 3px;
  }

  .nav-cluster {
    gap: 2px;
    padding: 2px;
    border-radius: 13px;
  }

  .nav-button {
    width: 31px;
    height: 31px;
    border-radius: 9px;
  }

  .nav-button svg {
    width: 15px;
    height: 15px;
  }

  .page-number {
    min-width: 48px;
    font-size: 10px;
  }

  .footer-actions {
    font-size: 10px;
  }
}

/* v56: zoom real con mouse y toolbar ampliada compacta */
.zoom-toolbar {
  top: max(6px, env(safe-area-inset-top));
  gap: 3px;
  padding: 4px;
}

.zoom-toolbar .ui-button {
  min-height: 30px;
  border-radius: 10px;
}

.zoom-toolbar .ui-button.icon {
  width: 30px;
}

.zoom-toolbar .ui-button#zoomReaderFirst,
.zoom-toolbar .ui-button#zoomReaderLast {
  width: 32px;
  min-width: 32px;
  font-size: 12px;
}

.zoom-page-status {
  min-width: 66px;
  padding: 0 7px;
  font-size: 11px;
}

#zoomReset {
  min-width: 46px;
  padding-inline: 6px;
  font-size: 10px;
}

.zoom-overlay {
  --reader-toolbar-space: 54px;
  --reader-side-space: 72px;
  padding: var(--reader-toolbar-space) 0 8px !important;
}

.zoom-pages {
  height: calc(100dvh - var(--reader-toolbar-space) - 8px);
  max-height: calc(100dvh - var(--reader-toolbar-space) - 8px);
  padding: 0 36px !important;
  cursor: zoom-in;
  transform: translate3d(var(--zoom-pan-x, 0), var(--zoom-pan-y, 0), 0);
  transition: transform .12s ease-out;
  touch-action: none;
}

.zoom-pages.zoomed {
  cursor: grab;
}

.zoom-pages.panning {
  cursor: grabbing;
  transition: none;
}

.zoom-pages img,
.zoom-pages.single img,
.zoom-pages:not(.single) img {
  width: calc(min(calc((100dvw - var(--reader-side-space)) / 2), calc(100dvh - var(--reader-toolbar-space) - 8px)) * var(--zoom-scale));
}

.zoom-pages.single img {
  width: calc(min(calc(100dvw - var(--reader-side-space)), calc(100dvh - var(--reader-toolbar-space) - 8px)) * var(--zoom-scale));
}

@media (max-width: 760px), (max-width: 950px) and (max-height: 520px) {
  .zoom-overlay {
    --reader-toolbar-space: 42px;
    --reader-side-space: 14px;
    padding: var(--reader-toolbar-space) 0 6px !important;
  }

  .zoom-toolbar .ui-button {
    min-height: 28px;
  }

  .zoom-toolbar .ui-button.icon {
    width: 28px;
  }

  .zoom-page-status {
    min-width: 54px;
    font-size: 9px;
  }

  #zoomReset {
    min-width: 42px;
    font-size: 9px;
  }

  .zoom-pages {
    height: calc(100dvh - var(--reader-toolbar-space) - 6px);
    max-height: calc(100dvh - var(--reader-toolbar-space) - 6px);
    padding: 0 7px !important;
  }

  .zoom-pages img,
  .zoom-pages.single img,
  .zoom-pages:not(.single) img {
    width: calc(min(calc(100dvw - var(--reader-side-space)), calc(100dvh - var(--reader-toolbar-space) - 6px)) * var(--zoom-scale));
  }
}

/* v57: salida del reader destacada y separada */
.zoom-toolbar .zoom-close {
  position: fixed;
  top: max(7px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  z-index: 6;
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #d71920, #ff4b4b);
  box-shadow: 0 12px 30px rgba(215,25,32,.35), 0 0 0 4px rgba(255,255,255,.08);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.zoom-toolbar .zoom-close:hover {
  color: #fff;
  background: linear-gradient(135deg, #b90f16, #f13535);
  transform: translateY(-1px) scale(1.03);
}

.zoom-toolbar .zoom-close:active {
  transform: scale(.96);
}

@media (max-width: 760px), (max-width: 950px) and (max-height: 520px) {
  .zoom-toolbar .zoom-close {
    top: max(5px, env(safe-area-inset-top));
    left: max(7px, env(safe-area-inset-left));
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 18px;
  }
}

/* v58: modo laptop, revista primero y laterales como drawers */
@media (min-width: 761px) and (max-width: 2100px), (min-width: 761px) and (max-height: 1200px) {
  body {
    grid-template-rows: 42px minmax(0, 1fr) 42px;
  }

  .topbar {
    height: 42px;
    padding: 0 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  .brand img {
    width: 34px;
    height: 29px;
  }

  .brand-title {
    font-size: 10.5px;
    letter-spacing: .09em;
  }

  .edition,
  .top-actions .button-text {
    display: none;
  }

  #openSponsors,
  #openMedia {
    display: inline-flex;
  }

  .top-actions {
    gap: 4px;
  }

  .top-actions .ui-button {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 10px;
  }

  .top-actions .ui-button svg {
    width: 15px;
    height: 15px;
  }

  .workspace {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

  .viewer-stage {
    padding: 4px 38px;
  }

  .edge-button {
    width: 32px;
    height: 46px;
    border-radius: 12px;
  }

  #prev { left: 4px; }
  #next { right: 4px; }

  .side-panel {
    position: fixed;
    z-index: 70;
    top: 42px;
    bottom: 42px;
    width: min(320px, 86vw);
    max-height: calc(100dvh - 84px);
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    background: rgba(250, 249, 246, .98);
    box-shadow: 0 18px 70px rgba(20, 15, 26, .26);
    transition: transform .24s var(--ease);
  }

  .sponsor-panel {
    left: 0;
    transform: translateX(-105%);
    border-radius: 0 16px 16px 0;
  }

  .media-panel {
    right: 0;
    transform: translateX(105%);
    border-radius: 16px 0 0 16px;
  }

  .side-panel.open {
    transform: translateX(0);
  }

  .panel-close {
    display: inline-flex;
    position: sticky;
    top: 0;
    z-index: 2;
    float: right;
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 9px;
  }

  .panel-kicker,
  .panel-copy {
    display: none;
  }

  .panel-heading {
    margin: 0 34px 10px 0;
    font-size: 15px;
    line-height: 1.05;
  }

  .sponsor-list {
    display: grid;
    gap: 8px;
    overflow: visible;
  }

  .sponsor-card {
    min-height: 104px;
    border-radius: 12px;
  }

  .sponsor-category {
    padding: 8px 10px;
    font-size: 7.5px;
    line-height: 1.18;
    letter-spacing: .1em;
  }

  .sponsor-content {
    padding: 18px 10px 9px;
  }

  .sponsor-card .sponsor-content strong {
    font-size: 12px;
    line-height: 1.05;
  }

  .sponsor-card .sponsor-content small {
    margin-top: 3px;
    font-size: 8.5px;
    line-height: 1.18;
  }

  .sponsor-card .sponsor-content em {
    margin-top: 6px;
    font-size: 8.5px;
  }

  .sponsor-card .sponsor-content b {
    width: 18px;
    height: 18px;
  }

  .context-actions {
    display: grid;
    gap: 7px;
  }

  .context-link {
    min-height: 40px;
    grid-template-columns: 27px minmax(0, 1fr) 13px;
    gap: 7px;
    padding: 6px 8px;
    border-radius: 11px;
  }

  .link-icon {
    width: 27px;
    height: 27px;
    border-radius: 9px;
  }

  .link-copy strong {
    font-size: 10px;
  }

  .link-copy small {
    font-size: 7.5px;
  }

  .podcast-section {
    padding-bottom: 10px;
  }

  .podcast-list {
    max-height: 40dvh;
    gap: 7px;
  }

  .podcast-button {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 7px;
    border-radius: 11px;
  }

  .video-thumb {
    width: 38px;
    height: 28px;
    border-radius: 8px;
  }

  .podcast-copy strong {
    font-size: 11px;
    line-height: 1.12;
  }

  .podcast-copy small {
    font-size: 9px;
  }

  .email-cta-card {
    margin-top: 12px;
    padding: 13px;
    border-radius: 14px;
  }

  .email-cta-card span {
    font-size: 8px;
  }

  .email-cta-card strong {
    font-size: 14px;
    line-height: 1.08;
  }

  .email-cta-card input,
  .email-cta-card button {
    min-height: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 11px;
  }

  .bottombar {
    min-height: 42px;
    padding: 4px 12px max(4px, env(safe-area-inset-bottom));
    grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  }

  .page-label {
    font-size: 11px;
  }

  .page-count,
  .footer-credit {
    display: none;
  }

  .progress {
    width: 96px;
    margin-top: 2px;
  }

  .nav-cluster {
    padding: 2px;
    gap: 2px;
    border-radius: 12px;
  }

  .nav-button {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .nav-button svg {
    width: 14px;
    height: 14px;
  }

  .page-number {
    min-width: 46px;
    font-size: 10px;
  }
}

@media (min-width: 761px) and (max-height: 860px) {
  body {
    grid-template-rows: 38px minmax(0, 1fr) 38px;
  }

  .topbar {
    height: 38px;
  }

  .brand img {
    width: 30px;
    height: 26px;
  }

  .top-actions .ui-button {
    width: 29px;
    min-width: 29px;
    min-height: 29px;
  }

  .viewer-stage {
    padding: 2px 34px;
  }

  .side-panel {
    top: 38px;
    bottom: 38px;
    max-height: calc(100dvh - 76px);
  }

  .bottombar {
    min-height: 38px;
    padding-top: 3px;
    padding-bottom: max(3px, env(safe-area-inset-bottom));
  }

  .nav-button {
    width: 27px;
    height: 27px;
  }
}


/* v59: cerrar reader sobrio y separado */
.zoom-toolbar .zoom-close {
  top: max(8px, env(safe-area-inset-top));
  left: calc(50% - 268px);
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 11px;
  color: #ff6b6b;
  background: rgba(28,24,33,.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,107,107,.12);
  font-size: 20px;
  font-weight: 850;
}

.zoom-toolbar .zoom-close:hover {
  color: #fff;
  border-color: rgba(255,107,107,.46);
  background: rgba(85,32,38,.94);
  box-shadow: 0 12px 28px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,107,107,.18);
  transform: translateY(-1px);
}

.zoom-toolbar .zoom-close:active {
  transform: scale(.97);
}

@media (max-width: 760px), (max-width: 950px) and (max-height: 520px) {
  .zoom-toolbar .zoom-close {
    top: max(5px, env(safe-area-inset-top));
    left: max(7px, env(safe-area-inset-left));
    width: 30px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 10px;
    font-size: 18px;
  }
}

/* v60: reader sin zoom y laptop con laterales visibles compactos */
#zoomOut,
#zoomReset,
#zoomIn {
  display: none !important;
}

.zoom-toolbar {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  gap: 4px;
  padding: 0;
}

.zoom-toolbar .ui-button:not(.zoom-close) {
  border-color: rgba(255,255,255,.2);
  background: rgba(28,24,33,.86);
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
}

.zoom-toolbar .zoom-close {
  top: max(8px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  color: #ff6b6b;
  background: rgba(28,24,33,.92);
  border-color: rgba(255,107,107,.32);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

.zoom-toolbar .zoom-close::after {
  content: "Salir";
  position: absolute;
  left: calc(100% + 7px);
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(28,24,33,.9);
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.zoom-pages {
  cursor: grab;
  transform: none !important;
}

.zoom-pages.zoomed,
.zoom-pages.panning {
  cursor: grab;
}

@media (min-width: 761px) and (max-width: 2100px), (min-width: 761px) and (max-height: 1200px) {
  #openSponsors,
  #openMedia {
    display: none !important;
  }

  .workspace {
    grid-template-columns: clamp(132px, 9vw, 162px) minmax(0, 1fr) clamp(172px, 13vw, 230px);
    overflow: hidden;
  }

  .side-panel {
    position: static;
    z-index: auto;
    top: auto;
    bottom: auto;
    width: auto;
    max-height: none;
    height: auto;
    padding: 8px 9px;
    overflow: hidden;
    transform: none !important;
    border-top: 0;
    border-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    transition: none;
  }

  .sponsor-panel {
    border-right: 1px solid var(--line);
  }

  .media-panel {
    border-left: 1px solid var(--line);
  }

  .panel-close {
    display: none !important;
  }

  .panel-heading {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.05;
  }

  .sponsor-list {
    gap: 7px;
  }

  .sponsor-card {
    min-height: 92px;
    border-radius: 11px;
  }

  .sponsor-category {
    padding: 7px 9px;
    font-size: 7px;
    line-height: 1.12;
    letter-spacing: .09em;
  }

  .sponsor-content {
    padding: 16px 9px 8px;
  }

  .sponsor-card .sponsor-content strong {
    font-size: 11px;
  }

  .sponsor-card .sponsor-content small {
    font-size: 7.8px;
    line-height: 1.15;
  }

  .sponsor-card .sponsor-content em {
    margin-top: 5px;
    font-size: 8px;
  }

  .context-link {
    min-height: 36px;
    grid-template-columns: 24px minmax(0, 1fr) 12px;
    gap: 6px;
    padding: 5px 7px;
    border-radius: 10px;
  }

  .link-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
  }

  .link-copy strong {
    font-size: 9.2px;
  }

  .link-copy small {
    font-size: 7px;
  }

  .podcast-section {
    padding-bottom: 8px;
  }

  .podcast-list {
    max-height: none;
    overflow: hidden;
  }

  .podcast-button {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 6px;
  }

  .video-thumb {
    width: 34px;
    height: 25px;
  }

  .podcast-copy strong {
    font-size: 10px;
  }

  .podcast-copy small {
    font-size: 8px;
  }

  .email-cta-card {
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
  }

  .email-cta-card strong {
    font-size: 12px;
  }

  .email-cta-card input,
  .email-cta-card button {
    min-height: 30px;
    height: 30px;
    font-size: 10px;
  }

  .viewer-stage {
    padding: 4px 34px;
  }
}

@media (min-width: 761px) and (max-height: 860px) {
  .workspace {
    grid-template-columns: clamp(124px, 8vw, 148px) minmax(0, 1fr) clamp(158px, 12vw, 210px);
  }

  .side-panel {
    padding: 7px;
  }

  .sponsor-card {
    min-height: 82px;
  }

  .sponsor-card .sponsor-content small,
  .sponsor-card .sponsor-content em {
    display: none;
  }

  .context-link {
    min-height: 32px;
  }

  .email-cta-card {
    display: none;
  }

  .viewer-stage {
    padding: 2px 30px;
  }
}

/* v61: reader ampliado solo con salir arriba */
.zoom-toolbar {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: 0;
  height: 0;
  max-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.zoom-toolbar > :not(.zoom-close) {
  display: none !important;
}

.zoom-toolbar .zoom-close {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 8;
  display: grid !important;
  place-items: center;
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid rgba(255,107,107,.36);
  border-radius: 11px;
  color: #ff6b6b;
  background: rgba(28,24,33,.94);
  box-shadow: 0 10px 26px rgba(0,0,0,.32);
  font-size: 22px;
  font-weight: 900;
}

.zoom-toolbar .zoom-close::after {
  content: "Salir";
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #fff;
  background: rgba(28,24,33,.9);
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.zoom-toolbar .zoom-close:hover {
  color: #fff;
  border-color: rgba(255,107,107,.58);
  background: rgba(88,31,38,.96);
}

/* v62: laptop sin barra inferior y laterales en filas compactas */
@media (min-width: 761px) and (max-width: 2100px), (min-width: 761px) and (max-height: 1200px) {
  body {
    grid-template-rows: 42px minmax(0, 1fr) 0;
  }

  .bottombar {
    display: none !important;
  }

  .workspace {
    grid-template-columns: clamp(124px, 8vw, 150px) minmax(0, 1fr) clamp(168px, 12vw, 215px);
  }

  .viewer-stage {
    padding: 4px 28px;
  }

  .side-panel {
    padding: 8px;
    overflow: hidden;
  }

  .panel-heading {
    margin: 0 0 7px;
    font-size: 12px;
    letter-spacing: -.02em;
  }

  .sponsor-list {
    gap: 6px;
  }

  .sponsor-card {
    min-height: 0;
    height: 64px;
    border-radius: 10px;
    display: grid;
    grid-template-rows: auto 1fr;
    box-shadow: 0 7px 16px rgba(30,24,38,.12);
  }

  .sponsor-category {
    padding: 7px 8px 0;
    font-size: 7px;
    line-height: 1.05;
    letter-spacing: .08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sponsor-content {
    min-width: 0;
    padding: 7px 8px 8px;
    background: linear-gradient(transparent, rgba(0,0,0,.28));
  }

  .sponsor-card .sponsor-content strong {
    display: block;
    max-width: 100%;
    font-size: 10px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sponsor-card .sponsor-content small,
  .sponsor-card .sponsor-content em {
    display: none;
  }

  .sponsor-cta-slot {
    margin-top: 6px;
  }

  .sponsor-cta-card {
    min-height: 0;
    padding: 8px;
    border-radius: 10px;
    gap: 3px;
  }

  .sponsor-cta-card span,
  .sponsor-cta-card small,
  .sponsor-cta-card em {
    display: none;
  }

  .sponsor-cta-card strong {
    font-size: 10px;
    line-height: 1.1;
  }

  .context-section {
    margin-top: 0;
  }

  .context-actions {
    gap: 6px;
  }

  .context-link {
    min-height: 34px;
    grid-template-columns: 23px minmax(0, 1fr) 10px;
    gap: 6px;
    padding: 5px 6px;
    border-radius: 10px;
    box-shadow: 0 7px 16px rgba(30,24,38,.1);
  }

  .link-icon {
    width: 23px;
    height: 23px;
    border-radius: 8px;
  }

  .link-icon svg {
    width: 14px;
    height: 14px;
  }

  .link-copy strong {
    font-size: 9px;
    line-height: 1.08;
  }

  .link-copy small {
    display: none;
  }

  .link-arrow {
    font-size: 14px;
  }

  .podcast-section {
    display: none !important;
  }

  .email-cta-card {
    margin-top: 8px;
    padding: 9px;
    border-radius: 11px;
  }

  .email-cta-card span {
    display: none;
  }

  .email-cta-card strong {
    font-size: 11px;
    line-height: 1.08;
  }

  .email-cta-card form {
    margin-top: 7px;
    gap: 6px;
  }

  .email-cta-card input,
  .email-cta-card button {
    min-height: 28px;
    height: 28px;
    padding-inline: 8px;
    border-radius: 8px;
    font-size: 10px;
  }
}

@media (min-width: 761px) and (max-height: 860px) {
  body {
    grid-template-rows: 38px minmax(0, 1fr) 0;
  }

  .workspace {
    grid-template-columns: clamp(116px, 7.5vw, 136px) minmax(0, 1fr) clamp(150px, 11vw, 190px);
  }

  .viewer-stage {
    padding: 2px 24px;
  }

  .side-panel {
    padding: 6px;
  }

  .panel-heading {
    font-size: 11px;
    margin-bottom: 5px;
  }

  .sponsor-card {
    height: 52px;
    border-radius: 9px;
  }

  .sponsor-category {
    padding: 6px 7px 0;
    font-size: 6.5px;
  }

  .sponsor-content {
    padding: 5px 7px 7px;
  }

  .sponsor-card .sponsor-content strong,
  .sponsor-cta-card strong {
    font-size: 9px;
  }

  .context-link {
    min-height: 30px;
    grid-template-columns: 21px minmax(0, 1fr) 8px;
    padding: 4px 6px;
  }

  .link-icon {
    width: 21px;
    height: 21px;
  }

  .link-copy strong {
    font-size: 8.5px;
  }

  .email-cta-card {
    display: none;
  }
}

/* v63: carril superior para patrocinadores/directorio y lectura con laterales libres */
.top-rail {
  display: none;
}

@media (min-width: 761px) and (max-width: 2100px), (min-width: 761px) and (max-height: 1200px) {
  body {
    grid-template-rows: 42px minmax(0, 1fr) 0;
  }

  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding: 3px 10px 3px 12px;
  }

  .brand {
    gap: 7px;
    min-width: 176px;
  }

  .brand img {
    width: 34px;
    height: 32px;
  }

  .brand-title {
    max-width: 126px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .edition {
    display: none !important;
  }

  .top-rail {
    min-width: 0;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }

  .top-rail::-webkit-scrollbar {
    display: none;
  }

  .top-rail[hidden] {
    display: none;
  }

  .top-chip {
    --chip-color: #2a103d;
    flex: 0 0 auto;
    width: clamp(118px, 9.5vw, 168px);
    height: 30px;
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 4px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--chip-color) 94%, #ffffff 6%), color-mix(in srgb, var(--chip-color) 72%, #000 28%));
    box-shadow: 0 6px 14px rgba(30, 24, 38, .1);
    text-decoration: none;
    cursor: pointer;
  }

  .top-chip.instagram {
    background: radial-gradient(circle at 18% 110%, #ffd600 0 18%, transparent 43%), linear-gradient(135deg, #d6249f, #fd5949);
  }

  .top-chip.youtube {
    background: linear-gradient(135deg, #e62117, #aa1210);
  }

  .top-chip.website,
  .top-chip.page {
    background: linear-gradient(135deg, #29113e, #16051f);
  }

  .top-chip.share,
  .top-chip.phone,
  .top-chip.email {
    background: linear-gradient(135deg, #2f6672, #28113d);
  }

  .top-chip-icon {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
  }

  .top-chip-icon svg {
    width: 14px;
    height: 14px;
  }

  .top-chip-copy {
    min-width: 0;
    display: block;
  }

  .top-chip-copy strong,
  .top-chip-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-chip-copy strong {
    font-size: 9px;
    line-height: 1.05;
  }

  .top-chip-copy small {
    margin-top: 1px;
    color: rgba(255, 255, 255, .78);
    font-size: 7px;
    line-height: 1;
  }

  .top-actions {
    gap: 5px;
  }

  .top-actions .ui-button {
    min-width: 34px;
    height: 34px;
    padding-inline: 9px;
    border-radius: 12px;
  }

  .top-actions .button-text {
    display: none;
  }

  #openSponsors,
  #openMedia {
    display: none !important;
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .side-panel {
    display: none !important;
  }

  .viewer-stage {
    padding: 4px 42px 6px !important;
  }

  .book-frame {
    max-width: none;
  }

  .bottombar {
    display: none !important;
  }
}

@media (min-width: 761px) and (max-height: 860px) {
  body {
    grid-template-rows: 38px minmax(0, 1fr) 0;
  }

  .top-rail {
    height: 30px;
    padding-inline: 8px;
  }

  .top-chip {
    height: 27px;
    width: clamp(104px, 8.6vw, 144px);
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 5px;
    padding-right: 7px;
  }

  .top-chip-icon {
    width: 20px;
    height: 20px;
  }

  .top-chip-icon svg {
    width: 12px;
    height: 12px;
  }

  .top-chip-copy strong {
    font-size: 8px;
  }

  .top-chip-copy small {
    display: none;
  }

  .viewer-stage {
    padding: 2px 34px 4px !important;
  }
}

/* v64: header mas compacto y revista aprovechando las orillas libres */
.brand {
  color: inherit;
  text-decoration: none;
}

.brand:focus-visible {
  outline: 2px solid rgba(250, 114, 93, .7);
  outline-offset: 3px;
  border-radius: 10px;
}

@media (min-width: 761px) and (max-width: 2100px), (min-width: 761px) and (max-height: 1200px) {
  body {
    grid-template-rows: 34px minmax(0, 1fr) 0;
  }

  .topbar {
    height: 34px;
    padding: 2px 8px;
    gap: 6px;
  }

  .brand {
    min-width: 172px;
    gap: 6px;
  }

  .brand img {
    width: 28px;
    height: 28px;
  }

  .brand-title {
    max-width: 128px;
    font-size: 10.5px;
  }

  .top-rail {
    height: 30px;
    padding-inline: 8px;
    gap: 5px;
  }

  .top-chip {
    height: 27px;
    width: clamp(108px, 8.4vw, 150px);
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 5px;
    padding: 3px 7px 3px 4px;
  }

  .top-chip-icon {
    width: 20px;
    height: 20px;
  }

  .top-chip-icon svg {
    width: 12px;
    height: 12px;
  }

  .top-chip-copy strong {
    font-size: 8px;
  }

  .top-chip-copy small {
    display: none;
  }

  .top-actions .ui-button {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 10px;
  }

  .top-actions .ui-button svg {
    width: 15px;
    height: 15px;
  }

  .viewer-stage {
    padding: 2px 8px 3px !important;
  }

  .edge-button {
    z-index: 6;
  }
}

@media (min-width: 761px) and (max-height: 860px) {
  body {
    grid-template-rows: 32px minmax(0, 1fr) 0;
  }

  .topbar {
    height: 32px;
    padding-block: 1px;
  }

  .top-rail {
    height: 28px;
  }

  .top-chip {
    height: 25px;
    width: clamp(100px, 8vw, 136px);
  }

  .viewer-stage {
    padding: 1px 6px 2px !important;
  }
}

/* v65: topbar separado en patrocinadores/directorio y drag horizontal */
@media (min-width: 761px) and (max-width: 2100px), (min-width: 761px) and (max-height: 1200px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .top-rail {
    min-width: 0;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(265px, 330px) minmax(300px, 1fr);
    align-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 0 8px;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .top-rail-section {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
  }

  .top-rail-label {
    color: rgba(42, 35, 47, .68);
    font-size: 7px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .top-rail-strip {
    min-width: 0;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
    -webkit-user-select: none;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
  }

  .top-rail-strip::-webkit-scrollbar {
    display: none;
  }

  .top-rail-strip.dragging {
    cursor: grabbing;
  }

  .top-rail-strip.dragging .top-chip {
    pointer-events: none;
  }

  .top-chip {
    width: 122px;
    min-width: 122px;
    max-width: 122px;
  }

  .top-rail-directory .top-chip {
    width: 134px;
    min-width: 134px;
    max-width: 134px;
  }

  .top-chip-icon {
    color: #fff;
  }

  .top-chip-icon svg,
  .zoom-toolbar .ui-button svg,
  .zoom-edge svg {
    display: block;
    color: currentColor;
  }

  .zoom-toolbar .zoom-close {
    width: auto !important;
    min-width: 78px !important;
    gap: 7px;
    padding: 0 11px !important;
  }

  .zoom-toolbar .zoom-close svg {
    width: 17px;
    height: 17px;
  }

  .zoom-close-text {
    display: inline-block;
    font-size: 11px;
    font-weight: 850;
  }

  .zoom-edge svg {
    width: 25px;
    height: 25px;
  }
}

@media (min-width: 761px) and (max-width: 1200px) {
  .top-rail {
    grid-template-columns: minmax(230px, 280px) minmax(240px, 1fr);
    gap: 7px;
  }

  .top-rail-label {
    display: none;
  }

  .top-rail-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .top-chip {
    width: 112px;
    min-width: 112px;
    max-width: 112px;
  }

  .top-rail-directory .top-chip {
    width: 124px;
    min-width: 124px;
    max-width: 124px;
  }
}

@media (max-width: 760px), (max-width: 950px) and (max-height: 520px) {
  .zoom-toolbar .zoom-close {
    width: auto !important;
    min-width: 72px !important;
    gap: 6px;
    padding: 0 10px !important;
  }

  .zoom-close-text {
    display: inline-block;
    font-size: 11px;
    font-weight: 850;
  }

  .zoom-toolbar .ui-button svg,
  .zoom-edge svg {
    display: block;
  }
}

/* v66: limitar directorio a 2-3 chips visibles */
@media (min-width: 761px) and (max-width: 2100px), (min-width: 761px) and (max-height: 1200px) {
  .top-rail {
    grid-template-columns: 330px minmax(420px, 520px);
    justify-content: start;
  }

  .top-rail-sponsors .top-rail-strip {
    width: 250px;
  }

  .top-rail-directory .top-rail-strip {
    width: min(100%, 414px);
  }
}

@media (min-width: 761px) and (max-width: 1200px) {
  .top-rail {
    grid-template-columns: minmax(224px, 248px) minmax(248px, 372px);
  }

  .top-rail-sponsors .top-rail-strip {
    width: 228px;
  }

  .top-rail-directory .top-rail-strip {
    width: min(100%, 252px);
  }
}

/* v67: PageFlip normal usa imgs DOM para evitar suavizado de canvas HiDPI */
#book .flip-page {
  background: #fff;
  overflow: hidden;
}

#book .flip-page img,
#book .stf__item > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* v68: cierre limpio, sponsors rotativos sin scroll y popup sin glifos corruptos */
.zoom-toolbar .zoom-close::after {
  content: none !important;
  display: none !important;
}

.zoom-close-text {
  display: none !important;
}

.zoom-toolbar .zoom-close {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
}

.zoom-toolbar .zoom-close svg {
  width: 18px;
  height: 18px;
}

.subscription-close {
  display: grid;
  place-items: center;
  color: #2a2330;
}

.subscription-close svg {
  width: 18px;
  height: 18px;
}

.subscription-success svg,
.sidebar-subscription-success svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 761px) and (max-width: 2100px), (min-width: 761px) and (max-height: 1200px) {
  .top-rail-sponsors .top-rail-strip {
    overflow: hidden !important;
    cursor: default;
    touch-action: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .top-rail-sponsors .top-chip {
    pointer-events: auto !important;
  }

  .top-rail-section[hidden] {
    display: none !important;
  }

  .top-rail:has(.top-rail-directory[hidden]) {
    grid-template-columns: 330px;
  }
}