/*! Pergamino · NF6 · v2.0 */
:root { --pg-css: 2; }

.pg, .pg *, .pg *::before, .pg *::after,
.pg-sello, .pg-sello *, .pg-sello *::before, .pg-sello *::after { box-sizing: border-box; }

.pg[hidden], .pg-sello[hidden] { display: none !important; }

.pg, .pg-sello { --pg-grano: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='.13'/></svg>"); }

/* Capa */

.pg {
  --pg-pad: 34px;
  --pg-foto: 84px;
  --pg-t-titulo: 40px;
  --pg-t-cifras: 44px;
  --pg-via: 50px;
  --pg-fibra: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/></filter><rect width='420' height='420' filter='url(%23f)' opacity='.07'/></svg>");
  --pg-manchas: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 -1.6 .9'/></filter><rect width='600' height='600' filter='url(%23m)' opacity='.16'/></svg>");
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  /* anclada abajo, sin velo: la web sigue viva y clicable alrededor de la hoja */
  place-items: end center;
  padding: 24px 24px max(20px, env(safe-area-inset-bottom));
  pointer-events: none;
  color: var(--pg-tinta);
  font-family: var(--pg-f-texto);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

.pg__velo {
  position: absolute;
  inset: 0;
  /* se conserva el nodo por compatibilidad, pero ya no oscurece ni tapa nada */
  display: none;
  pointer-events: none;
}
.pg[data-lado="izquierda"] { justify-items: start; }
.pg[data-lado="derecha"] { justify-items: end; }

/* La hoja */

.pg__dialogo {
  position: relative;
  width: min(420px, 100%);
  pointer-events: auto;
  outline: none;
}
.pg[data-fase="abriendo"] .pg__dialogo { will-change: transform, opacity; }
.pg[data-fase="cerrando"] .pg__dialogo { will-change: transform, filter, opacity; }
/* la sombra en su capa, sin filter: se pinta una vez y sigue a cada silueta con transform */
.pg__sombra {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  pointer-events: none;
  transform-origin: 0 0;
  box-shadow: 0 16px 26px rgba(38, 28, 16, .22);
}
.pg[data-fase="abriendo"] .pg__sombra { will-change: transform; }

.pg__lamina {
  position: relative;
  transform-origin: 50% 50%;
}
.pg[data-fase="abriendo"] .pg__lamina,
.pg[data-fase="cerrando"] .pg__lamina { will-change: transform; }
/* la hoja va en su capa: el recorte del papel cambia en cada fotograma y así no arrastra al texto */
.pg[data-fase="abriendo"] .pg__hoja { will-change: transform; }

.pg__papel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--pg-fondo);
  background-image: var(--pg-grano), var(--pg-fibra), var(--pg-manchas);
  background-size: 180px 180px, 420px 420px, 600px 600px;
  box-shadow:
    inset 0 0 0 .5px rgba(60, 44, 24, .16),
    inset 0 0 36px rgba(96, 72, 40, .10);
  isolation: isolate;
}

.pg__volumen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  /* solo el borde en sombra, neto: las caras las pone el relieve del canvas (nada de brillo blando) */
  background:
    radial-gradient(circle calc(var(--pg-r, 90px) * 1.08) at calc(50% - var(--pg-r, 90px) * .08) calc(50% - var(--pg-r, 90px) * .1),
      transparent 0%, transparent 64%,
      color-mix(in srgb, var(--pg-tinta) 20%, transparent) 84%,
      color-mix(in srgb, var(--pg-tinta) 38%, transparent) 100%);
}

/* dos relieves: «arrugas» es la bola (luz arriba a la izquierda), «pliegues» la hoja
   abierta con la luz girada; en reposo solo queda un rastro de los pliegues */
.pg__arrugas,
.pg__pliegues {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.pg__pliegues { opacity: .34; }

.pg__hoja {
  position: relative;
  z-index: 1;
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 18px var(--pg-pad) calc(var(--pg-pad) - 2px);
}
.pg__hoja::-webkit-scrollbar { display: none; }

/* la tinta entra de izquierda a derecha mientras se despliega (máscara sobre cada bloque de texto: solo repinta
   ese bloque; probado con una tapa que se desplaza en ::after y en headless salía peor, ver _qa/WOW-26SEP.md) */
.pg[data-fase="abriendo"] [data-pg-t]:not([data-pg-t="foto"]) {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.pg p, .pg h2, .pg ul, .pg li { margin: 0; padding: 0; }
.pg ul { list-style: none; }
.pg img, .pg svg { display: block; max-width: none; }
.pg a { color: inherit; text-decoration: none; }
.pg button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.pg__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  margin-right: -12px;
}
.pg__logo { display: block; width: 37px; height: 15px; color: var(--pg-tinta); }
.pg__logo svg { width: 100%; height: 100%; }

.pg__cerrar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--pg-radio);
  color: color-mix(in srgb, var(--pg-tinta) 62%, transparent);
  transition: color .2s ease, background-color .2s ease;
}
.pg .pg__cerrar svg { width: 16px; height: 16px; }
.pg__cerrar:hover { color: var(--pg-tinta); background: color-mix(in srgb, var(--pg-tinta) 7%, transparent); }

.pg a:focus-visible, .pg button:focus-visible {
  outline: 2px solid var(--pg-tinta);
  outline-offset: 2px;
}

/* Autor */

.pg__autor {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 0 24px;
}

.pg .pg__foto {
  width: var(--pg-foto);
  height: var(--pg-foto);
  margin: 0 0 18px;
  border-radius: 50%;
  object-fit: cover;
  background: color-mix(in srgb, var(--pg-tinta) 8%, var(--pg-fondo));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pg-tinta) 16%, transparent),
    0 0 0 5px var(--pg-fondo),
    0 0 0 6px color-mix(in srgb, var(--pg-tinta) 14%, transparent);
}

.pg .pg__titulo {
  font-family: var(--pg-f-titulo);
  font-size: var(--pg-t-titulo);
  font-weight: var(--pg-peso-titulo);
  font-style: normal;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--pg-tinta);
  text-transform: none;
  text-wrap: balance;
}

.pg .pg__credito {
  max-width: 36ch;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--pg-tinta) 72%, transparent);
  text-wrap: balance;
}

/* Cuenta atrás */

.pg__reloj {
  position: relative;
  padding: 18px 0 20px;
  border-top: 1px solid color-mix(in srgb, var(--pg-tinta) 16%, transparent);
  text-align: center;
}

.pg .pg__reloj-texto {
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--pg-tinta) 72%, transparent);
}

.pg__cifras {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-top: 8px;
  font-family: var(--pg-f-cifras);
  font-size: var(--pg-t-cifras);
  font-weight: var(--pg-peso-cifras);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--pg-tinta);
}
.pg__ud {
  margin: 0 .42em 0 .1em;
  font-family: var(--pg-f-titulo);
  font-size: .4em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--pg-tinta) 64%, transparent);
}
.pg__ud:last-child { margin-right: 0; }

.pg .pg__agotado {
  display: none;
  max-width: 30ch;
  margin: 10px auto 0;
  font-family: var(--pg-f-titulo);
  font-weight: var(--pg-peso-titulo);
  font-size: 22px;
  line-height: 1.25;
  color: var(--pg-tinta);
  text-wrap: balance;
}
.pg[data-agotado] .pg__reloj-texto,
.pg[data-agotado] .pg__cifras { display: none; }
.pg[data-agotado] .pg__agotado { display: block; margin-top: 0; }

.pg__oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tarjeta: se lee como una hoja escrita, no como una lista de enlaces */

.pg .pg__tarjeta {
  font-family: var(--pg-f-titulo);
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
  color: color-mix(in srgb, var(--pg-tinta) 84%, transparent);
}
/* la raya va en la primera línea, que entra con la tinta (en la lista se vería durante el despliegue) */
.pg .pg__tarjeta li:first-child {
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--pg-tinta) 16%, transparent);
}
.pg .pg__nombre {
  margin-bottom: 2px;
  font-size: 19px;
  color: var(--pg-tinta);
}
.pg .pg__tarjeta a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.pg .pg__tarjeta a:hover,
.pg .pg__tarjeta a:focus-visible { color: var(--pg-tinta); text-decoration-color: color-mix(in srgb, var(--pg-tinta) 55%, transparent); }

/* Botón */

.pg .pg__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  margin-top: 22px;
  padding: 0 24px;
  border-radius: var(--pg-radio);
  background: var(--pg-acento);
  color: var(--pg-acento-texto);
  font-family: var(--pg-f-texto);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  box-shadow: inset 0 0 0 999px transparent;
  transition: box-shadow .2s ease, transform .15s ease;
}
.pg__cta:hover { box-shadow: inset 0 0 0 999px var(--pg-cta-luz); }
.pg__cta:active { transform: scale(.985); }
.pg .pg__cta:focus-visible { outline-color: var(--pg-acento); outline-offset: 3px; }

/* Sello */

.pg-sello {
  --pg-abajo: 24px;
  position: fixed;
  z-index: 2147482990;
  bottom: calc(var(--pg-abajo) + env(safe-area-inset-bottom, 0px));
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin: 0;
  padding: 0 16px 0 6px;
  border: 1px solid color-mix(in srgb, var(--pg-tinta) 14%, transparent);
  border-radius: var(--pg-radio);
  background-color: var(--pg-fondo);
  background-image: var(--pg-grano);
  background-size: 180px 180px;
  color: var(--pg-tinta);
  font-family: var(--pg-f-texto);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transform-origin: 20% 100%;
  box-shadow:
    0 1px 2px rgba(38, 28, 16, .10),
    0 10px 24px -10px rgba(38, 28, 16, .32);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  transition: translate .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, bottom .3s cubic-bezier(.2, .8, .2, 1);
}
.pg-sello[data-lado="derecha"] { left: auto; right: 24px; transform-origin: 80% 100%; }
.pg-sello img {
  display: block;
  width: 32px;
  height: 32px;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pg-tinta) 14%, transparent);
}
.pg-sello__txt { display: inline-flex; align-items: baseline; }
.pg-sello__punto { color: color-mix(in srgb, var(--pg-tinta) 45%, transparent); }
.pg-sello__t {
  font-family: var(--pg-f-cifras);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.pg-sello:hover {
  translate: 0 -2px;
  box-shadow:
    0 1px 2px rgba(38, 28, 16, .10),
    0 16px 30px -12px rgba(38, 28, 16, .36);
}
.pg-sello:active { translate: 0 0; }
.pg-sello:focus-visible { outline: 2px solid var(--pg-tinta); outline-offset: 3px; }

/* Móvil */

@media (max-width: 560px) {
  .pg {
    --pg-pad: 22px;
    --pg-foto: 76px;
    --pg-t-titulo: 34px;
    --pg-t-cifras: 40px;
    padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  }
  .pg__hoja { max-height: calc(100dvh - 24px); padding-top: 12px; }
  .pg__cerrar { width: 44px; height: 44px; }
  .pg__cab { height: 44px; margin-right: -10px; }
  .pg__autor { padding-bottom: 20px; }
  .pg-sello {
    --pg-abajo: 16px;
    left: 16px;
    width: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
    transition: translate .34s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, bottom .3s cubic-bezier(.2, .8, .2, 1);
  }
  .pg-sello[data-lado="derecha"] { right: 16px; }
  .pg-sello:has(img) .pg-sello__txt { display: none; }
  .pg-sello:not(:has(img)) { width: auto; padding: 0 14px; }
  .pg-sello__hecho { display: none; }
  .pg-sello:not(:has(.pg-sello__t:not(:empty))) .pg-sello__hecho { display: inline; }
  /* retirado: solo asoma una pestaña de 12 px pegada al borde */
  .pg-sello[data-retirado] { translate: calc(-100% - 4px) 0; }
  .pg-sello[data-lado="derecha"][data-retirado] { translate: calc(100% + 4px) 0; }
  .pg-sello[data-retirado]:focus-visible:not([data-foco-devuelto]) { translate: 0 0; }
}

@media (max-height: 760px) {
  .pg {
    --pg-foto: 64px;
    --pg-t-titulo: 32px;
    --pg-t-cifras: 36px;
    --pg-via: 44px;
  }
  .pg__autor { padding-bottom: 18px; }
  .pg .pg__foto { margin-bottom: 14px; }
  .pg__reloj { padding: 14px 0 16px; }
  .pg .pg__cta { margin-top: 18px; height: 50px; }
}

@media (max-height: 640px) {
  .pg {
    --pg-foto: 56px;
    --pg-t-titulo: 28px;
    --pg-t-cifras: 32px;
    --pg-via: 42px;
  }
  .pg__cab { height: 36px; }
  .pg__autor { padding-bottom: 14px; }
  .pg .pg__foto { margin-bottom: 10px; }
  .pg__reloj { padding: 12px 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg *, .pg-sello { transition: none !important; }
}

/* la bola lleva caras con luz y sombra propias: sin soft-light, que las aplastaba */
.pg__arrugas.pg__arrugas { mix-blend-mode: normal; }