/* ============================================================
   JCM — Portafolio digital (flipbook)
   ============================================================ */
:root {
  --steel: #1F2F46; --steel-700:#274064; --teal:#30C5C2; --teal-700:#1B8F8C;
  --ink:#172233; --ink-3:#667085; --line:#E2E7EC;
  --pf-bg1:#EEF2F5; --pf-bg2:#E2E8EE;
  --font-display:"Exo 2", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
}
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% 0%, #fff 0%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, var(--pf-bg1) 0%, var(--pf-bg2) 100%);
  background-attachment: fixed;
  min-height:100dvh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }

/* ---------- Barra superior ---------- */
.pf-header {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(255,255,255,.72); backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.pf-brand { display:inline-flex; align-items:center; gap:10px; }
.pf-brand img { height:38px; width:auto; }
.pf-back { font-family:var(--font-display); font-weight:500; font-size:.92rem; color:var(--ink-3); display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:9px; transition:color .2s, background .2s; text-decoration:none; }
.pf-back:hover { color:var(--steel); background:#fff; }
.pf-back svg { width:16px; height:16px; }
.pf-download {
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  color:#fff; background:var(--steel); padding:11px 18px; border-radius:999px;
  box-shadow:0 8px 20px -10px rgba(31,47,70,.8); transition:transform .18s, background .25s, box-shadow .25s;
}
.pf-download:hover { transform:translateY(-2px); background:var(--steel-700); box-shadow:0 12px 26px -10px rgba(31,47,70,.9); }
.pf-download svg { width:18px; height:18px; }

/* ---------- Escenario del libro ---------- */
.pf-stage {
  flex:1; display:flex; align-items:center; justify-content:center; gap:clamp(8px,2vw,28px);
  padding:clamp(20px,4vh,56px) clamp(12px,3vw,40px);
  position:relative;
}
.pf-book-wrap { position:relative; width:100%; max-width:1140px; }
/* Sombra suave bajo el libro */
.pf-book-wrap::after {
  content:""; position:absolute; left:8%; right:8%; bottom:-26px; height:44px; z-index:-1;
  background:radial-gradient(60% 100% at 50% 0%, rgba(23,34,51,.28), rgba(23,34,51,0) 72%);
  filter:blur(6px);
}
.pf-book { margin:0 auto; touch-action:pan-y; }
/* Lomo central sutil cuando el libro está abierto */
.pf-book .stf__parent { margin:0 auto; }
.pf-book .page { position:relative; background:#fff; overflow:hidden; }
.pf-book .page__img { width:100%; height:100%; object-fit:cover; display:block; }
/* Sombra interior hacia el lomo */
.pf-book .page::after {
  content:""; position:absolute; top:0; bottom:0; width:34px; pointer-events:none; opacity:.5;
}
.pf-book .page--right::after { left:0; background:linear-gradient(90deg, rgba(23,34,51,.14), rgba(23,34,51,0)); }
.pf-book .page--left::after  { right:0; background:linear-gradient(270deg, rgba(23,34,51,.14), rgba(23,34,51,0)); }
.pf-book .page--hard { background:#fff; }

/* ---------- Botones laterales ---------- */
.pf-nav {
  flex:none; width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--steel); cursor:pointer;
  display:grid; place-items:center; box-shadow:0 8px 22px -12px rgba(23,34,51,.4);
  transition:transform .18s, background .2s, color .2s, box-shadow .2s; z-index:5;
}
.pf-nav:hover { transform:scale(1.06); background:var(--steel); color:#fff; }
.pf-nav:disabled { opacity:.35; cursor:default; transform:none; }
.pf-nav svg { width:24px; height:24px; }

/* ---------- Controles inferiores ---------- */
.pf-controls { display:flex; flex-direction:column; align-items:center; gap:14px; padding:8px 16px clamp(20px,4vh,40px); }
.pf-indicator {
  font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--steel);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 18px;
  box-shadow:0 6px 16px -10px rgba(23,34,51,.35); letter-spacing:.02em;
}
.pf-indicator b { color:var(--teal-700); }
.pf-controls-btns { display:none; gap:12px; }
.pf-btn {
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--steel); transition:background .2s, color .2s, transform .15s;
}
.pf-btn:hover { background:var(--steel); color:#fff; }
.pf-btn:disabled { opacity:.4; cursor:default; }
.pf-btn svg { width:18px; height:18px; }

/* ---------- Loader ---------- */
.pf-loader { position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:linear-gradient(180deg,var(--pf-bg1),var(--pf-bg2)); transition:opacity .5s; }
.pf-loader.hide { opacity:0; pointer-events:none; }
.pf-spinner { width:44px; height:44px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--teal); animation:pf-spin .8s linear infinite; }
.pf-loader p { margin-top:16px; font-family:var(--font-display); color:var(--ink-3); font-size:.9rem; letter-spacing:.05em; }
@keyframes pf-spin { to { transform:rotate(360deg); } }

/* Pista de "clic para pasar" */
.pf-hint { text-align:center; font-family:var(--font-body); font-size:.82rem; color:var(--ink-3); margin-top:2px; }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
  .pf-nav { position:absolute; top:50%; transform:translateY(-50%); }
  .pf-nav:hover { transform:translateY(-50%) scale(1.06); }
  .pf-prev { left:6px; } .pf-next { right:6px; }
  .pf-stage { padding-inline:8px; }
}
@media (max-width:560px) {
  .pf-nav { display:none; }
  .pf-controls-btns { display:flex; }
  .pf-brand img { height:32px; }
  .pf-download { padding:10px 14px; font-size:.88rem; }
  .pf-download .pf-dl-text { display:none; }
}
@media (prefers-reduced-motion:reduce) { .pf-spinner { animation:none; } }