/* latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-italic-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-italic.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-regular-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-regular.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/mulish-shared-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/mulish-shared-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/mulish-shared-3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/mulish-shared-4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/mulish-shared-5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-shared-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-shared-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-shared-3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-shared-4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-shared-5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/mulish-shared-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/mulish-shared-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/mulish-shared-3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/mulish-shared-4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/mulish-shared-5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/mulish-shared-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/mulish-shared-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/mulish-shared-3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/mulish-shared-4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/mulish-shared-5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/mulish-shared-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/mulish-shared-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/mulish-shared-3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/mulish-shared-4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/mulish-shared-5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/mulish-shared-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/mulish-shared-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/mulish-shared-3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/mulish-shared-4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/mulish-shared-5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/mulish-shared-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/mulish-shared-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/mulish-shared-3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/mulish-shared-4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/mulish-shared-5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
   Vital Nutrition · Álbum Coleccionable
   ÁLBUM REAL — vista de doble página
   ============================================ */

:root {
  --purple: #69488E;
  --purple-deep: #5B1C74;
  --purple-deeper: #3B0F4F;
  --purple-night: #200634;
  --purple-ink: #1A0827;
  --turquoise: #00B7B3;
  --teal: #06898C;
  --teal-dark: #044F50;
  --mint: #E8F6EE;
  --cardboard: #F4EBD3;
  --cardboard-shadow: #d8c89c;
  --cream: #FBF6EA;
  --ink: #1F0A2E;
  --gold: #E6B855;
  --gold-light: #F2D177;
  --pink-holo: #FF8FC8;

  --display: "Moranga", "DM Serif Display", "Recoleta", Georgia, serif;
  --sans: "Museo Sans", "Mulish", "Avenir Next", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  background: var(--purple-night);
}

/* ────────────────────────────────────────────
   BODY BACKGROUND – stadium night mundialista
   ──────────────────────────────────────────── */
body {
  background:
    /* stadium top lights */
    radial-gradient(ellipse 60% 30% at 15% 0%,  rgba(109,228,225,0.22), transparent 70%),
    radial-gradient(ellipse 60% 30% at 85% 0%,  rgba(255,143,200,0.18), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 10%, rgba(255,255,255,0.10), transparent 65%),
    /* stadium green grass strip at bottom */
    linear-gradient(180deg,
      #2a0a3e 0%,
      #4a1462 30%,
      #5b1c74 55%,
      #2a3a44 78%,
      #0d3a36 100%);
  background-attachment: fixed;
}

/* confetti dots layered on top */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    /* small bright dots */
    radial-gradient(circle at 8% 12%,  #6de4e1 0 2.5px, transparent 3px),
    radial-gradient(circle at 92% 18%, #ff8fc8 0 2.5px, transparent 3px),
    radial-gradient(circle at 22% 32%, #f2d177 0 2.5px, transparent 3px),
    radial-gradient(circle at 78% 36%, #ffffff 0 2px,   transparent 2.5px),
    radial-gradient(circle at 14% 58%, #6de4e1 0 1.8px, transparent 2.3px),
    radial-gradient(circle at 88% 62%, #f2d177 0 2.2px, transparent 2.6px),
    radial-gradient(circle at 6% 78%,  #ffffff 0 1.6px, transparent 2px),
    radial-gradient(circle at 96% 84%, #ff8fc8 0 2px,   transparent 2.5px),
    radial-gradient(circle at 45% 4%,  #ffffff 0 1.4px, transparent 2px),
    radial-gradient(circle at 60% 20%, #6de4e1 0 1.6px, transparent 2px),
    radial-gradient(circle at 32% 88%, #f2d177 0 1.8px, transparent 2.4px);
  opacity: 0.85;
  z-index: 0;
}

/* stadium grass stripes near bottom */
body::after {
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 22vh;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.08) 0 80px,
      transparent 80px 160px);
  mask: linear-gradient(180deg, transparent 0%, black 60%, black 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, black 60%, black 100%);
  z-index: 0;
}

/* ────────────────────────────────────────────
   APP CONTAINER
   ──────────────────────────────────────────── */
.app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 48px;
  max-width: 1360px;
  margin: 0 auto;
}

/* ============================================
   HEADER
   ============================================ */
.header {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(135deg, #7a55a3 0%, var(--purple) 28%, var(--purple-deep) 100%);
  padding: 22px 28px 26px;
  color: #fff;
  box-shadow:
    0 28px 60px -22px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.12);
  margin-bottom: 22px;
}

.header::before {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(0,183,179,0.55), transparent 65%);
  filter: blur(8px);
}

.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: linear-gradient(90deg,
    var(--turquoise) 0%, var(--teal) 30%, #6de4e1 55%, var(--turquoise) 80%, var(--gold) 100%);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  z-index: 2;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
  min-width: 0;
}

/* real logo, dropped to white tint via filter for use on purple */
.logo {
  background: #fff;
  border-radius: 14px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  flex-shrink: 0;
  box-shadow:
    0 8px 20px -10px rgba(0,0,0,0.5),
    inset 0 -2px 0 rgba(0,0,0,0.06);
}

.logo img {
  height: 100%;
  width: auto;
  display: block;
}

.header-titles {
  min-width: 0;
}

.header-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #6de4e1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.header-eyebrow .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--turquoise);
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(0,183,179,0.25);
}

.header-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 0.95;
  margin: 0;
  color: #fff;
  letter-spacing: -0.01em;
}

.header-title .accent {
  color: #6de4e1;
  font-style: italic;
}

.header-subtitle {
  margin-top: 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.header-subtitle .sep {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--turquoise);
}

/* counter card */
.counter {
  flex-shrink: 0;
  text-align: right;
  padding: 14px 20px;
  border-radius: 16px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  min-width: 200px;
}

.counter-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
  white-space: nowrap;
}

.counter-value {
  font-family: var(--display);
  font-size: 30px;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
}

.counter-value .sep {
  color: rgba(255,255,255,0.4);
  margin: 0 4px;
}

.counter-value .total {
  color: #6de4e1;
}

.counter-progress {
  margin-top: 10px;
  height: 6px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
}

.counter-progress-fill {
  height: 100%;
  background: linear-gradient(90deg,
    var(--turquoise) 0%, #6de4e1 50%, var(--gold) 100%);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 14px rgba(109,228,225,0.55);
}

/* ============================================
   BOOK – open album, two facing pages
   ============================================ */
.book-wrap {
  flex: 1;
  position: relative;
  perspective: 2200px;
}

.book {
  position: relative;
  background: var(--purple-night);
  border-radius: 18px;
  padding: 14px 14px 14px;
  box-shadow:
    0 40px 70px -30px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 0 2px rgba(109,228,225,0.10);
}

/* subtle outer cover band */
.book::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 14px;
  border: 1px dashed rgba(109,228,225,0.18);
  pointer-events: none;
}

.spread {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--cardboard);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(0,0,0,0.08);
}

/* paper grain on the cardboard */
.spread::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(216,200,156,0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 60%, rgba(216,200,156,0.4) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 80%, rgba(120,80,40,0.10) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 14%, rgba(216,200,156,0.4) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 55%, rgba(91,28,116,0.06) 0 1px, transparent 2px);
  opacity: 0.6;
  mix-blend-mode: multiply;
  z-index: 1;
}

/* center spine fold */
.spread::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 38px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg,
      rgba(60,28,90,0.0) 0%,
      rgba(60,28,90,0.18) 18%,
      rgba(30,10,50,0.55) 50%,
      rgba(60,28,90,0.18) 82%,
      rgba(60,28,90,0.0) 100%);
  pointer-events: none;
  z-index: 2;
}

/* spine stitching dots */
.spine-stitch {
  position: absolute;
  left: 50%;
  top: 26px;
  bottom: 26px;
  width: 2px;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(91,28,116,0.55) 0 5px,
      transparent 5px 14px);
  border-radius: 2px;
  z-index: 3;
}

/* each page */
.page {
  position: relative;
  padding: 26px 28px 22px;
  z-index: 2;
}

.page-left {
  padding-right: 38px;
  background:
    linear-gradient(to left,
      rgba(60,28,90,0.0) 0%,
      rgba(60,28,90,0.08) 30%,
      rgba(60,28,90,0.0) 100%);
}
.page-right {
  padding-left: 38px;
  background:
    linear-gradient(to right,
      rgba(60,28,90,0.0) 0%,
      rgba(60,28,90,0.08) 30%,
      rgba(60,28,90,0.0) 100%);
}

/* page top label strip */
.page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px dashed rgba(91,28,116,0.22);
}

.page-header .letter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--turquoise), var(--teal));
  color: #fff;
  font-family: var(--display);
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(0,0,0,0.18);
}

.page-header.right { justify-content: flex-end; }

.page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--purple-deep);
  color: #fff;
  font-family: var(--display);
  font-size: 16px;
  flex-shrink: 0;
  box-shadow:
    0 3px 0 rgba(0,0,0,0.18),
    inset 0 0 0 2px rgba(109,228,225,0.5);
}

.page-section {
  font-family: var(--display);
  font-size: 22px;
  color: var(--purple-deep);
  line-height: 1;
  letter-spacing: -0.005em;
}

.page-flag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
}

/* card grid per page (2×2 for premium feel) */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 20px;
  padding: 0 4px;
}

/* ============================================
   SLOTS
   ============================================ */
.slot {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
}

.slot-number {
  position: absolute;
  top: -8px;
  left: 8px;
  z-index: 5;
  font-family: var(--display);
  font-size: 11px;
  background: #fff;
  color: var(--purple-deep);
  border: 1.5px solid var(--purple-deep);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 0 rgba(91,28,116,0.22);
  white-space: nowrap;
}

.slot.filled .slot-number {
  background: var(--purple-deep);
  color: #fff;
  border-color: #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,0.18), 0 0 0 2px rgba(0,183,179,0.45);
}

/* ─── Empty slot ─── */
.slot-empty {
  width: 100%;
  height: 100%;
  border: 2px dashed var(--turquoise);
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,183,179,0.04) 0 8px,
      rgba(0,183,179,0.10) 8px 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.slot-empty:hover {
  transform: translateY(-2px);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,183,179,0.10) 0 8px,
      rgba(0,183,179,0.18) 8px 16px);
  border-color: var(--teal);
}

.slot-empty:hover .plus-glyph {
  transform: rotate(8deg) scale(1.06);
}

.plus-glyph {
  width: 44px;
  height: 44px;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}

.empty-label {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-deep);
  opacity: 0.72;
  white-space: nowrap;
}

.empty-hint {
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0.95;
  white-space: nowrap;
}

/* ─── Filled card – holographic premium ─── */
.card {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 12px;
  padding: 3px;
  background:
    conic-gradient(
      from 0deg,
      #ff8fc8 0deg,
      #b095f0 50deg,
      #00b7b3 100deg,
      #6de4e1 140deg,
      #f2d177 180deg,
      #ff8fc8 220deg,
      #69488e 270deg,
      #06898c 320deg,
      #ff8fc8 360deg);
  background-size: 200% 200%;
  cursor: zoom-in;
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease;
  box-shadow:
    0 8px 22px -8px rgba(91,28,116,0.55),
    0 2px 6px rgba(0,0,0,0.18);
  animation: holoShift 9s linear infinite;
}

@keyframes holoShift {
  0%   { filter: hue-rotate(0deg) saturate(1.05); }
  50%  { filter: hue-rotate(22deg) saturate(1.22); }
  100% { filter: hue-rotate(0deg) saturate(1.05); }
}

.card:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow:
    0 18px 36px -10px rgba(0,183,179,0.6),
    0 10px 22px -8px rgba(91,28,116,0.55);
}

/* shine sweep */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 35%,
      rgba(255,255,255,0.55) 48%,
      rgba(109,228,225,0.42) 52%,
      rgba(255,255,255,0.55) 56%,
      transparent 70%,
      transparent 100%);
  background-size: 220% 220%;
  background-position: 100% 100%;
  opacity: 0;
  transition: opacity 0.25s ease, background-position 0.9s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 3;
}

.card:hover::before {
  opacity: 1;
  background-position: 0% 0%;
}

.card-inner {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 50% 35%, #3a1454 0%, #1a0827 70%, #0c0418 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}

/* faint holographic shimmer inside the card behind the image */
.card-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    conic-gradient(
      from 0deg,
      rgba(255,143,200,0.18),
      rgba(109,228,225,0.18),
      rgba(242,209,119,0.18),
      rgba(255,143,200,0.18));
  opacity: 0.55;
  mix-blend-mode: screen;
  z-index: 0;
}

/* card overlays */
.card-num {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,0.5))
    drop-shadow(0 0 12px rgba(242,209,119,0.4));
}

.card-num.foil-chrome { /* uses .foil-chrome from styles-extra.css */ }

.card-logo {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 4;
  background: rgba(255,255,255,0.95);
  border-radius: 6px;
  padding: 3px 6px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.card-logo img {
  height: 100%;
  width: auto;
  display: block;
}

/* nameplate strip at bottom */
.card-plate {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  z-index: 4;
  background:
    linear-gradient(180deg,
      rgba(26,8,39,0.95) 0%,
      rgba(60,28,90,0.95) 100%);
  border: 1px solid rgba(109,228,225,0.5);
  border-radius: 7px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.card-plate .plate-text {
  /* foil chrome lettering applied via class */
  font-family: var(--display);
}

.card-plate::before,
.card-plate::after {
  content: "✦";
  color: var(--turquoise);
  font-size: 8px;
  opacity: 0.9;
}

/* card delete button — visible always */
.card-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(26,8,39,0.88);
  color: #fff;
  border: 1px solid rgba(255,143,200,0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.card-remove.always { opacity: 0.82; }

.card:hover .card-remove {
  opacity: 1;
  transform: scale(1.08);
}

.card-remove:hover {
  background: #ff8fc8;
  color: var(--purple-ink);
  border-color: #fff;
}

/* ============================================
   FOOTER / NAVIGATION
   ============================================ */
.footer-nav {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.page-indicator {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.page-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.page-pill .page-num-display {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  color: #6de4e1;
}

.page-pill .sep-mid {
  color: rgba(255,255,255,0.4);
  margin: 0 2px;
}

.page-dots {
  display: flex;
  gap: 6px;
}

.page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.page-dot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--turquoise);
  box-shadow: 0 0 12px rgba(0,183,179,0.6);
}

.page-dot:hover:not(.active) {
  background: rgba(255,255,255,0.5);
}

.nav-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn-nav {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 18px -6px rgba(0,0,0,0.45),
    0 2px 0 rgba(91,28,116,0.25);
  transition: all 0.2s ease;
  color: var(--purple-deep);
}

.btn-nav:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--turquoise);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(0,183,179,0.6);
}

.btn-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-upload {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--turquoise) 0%, var(--teal) 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow:
    0 10px 26px -10px rgba(0,183,179,0.7),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.btn-upload:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px -10px rgba(0,183,179,0.9),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

.btn-upload svg {
  width: 18px;
  height: 18px;
}

.btn-reset {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.7);
  padding: 12px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-reset:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}

/* page turn animation */
.spread.fade-in {
  animation: spreadFade 0.5s cubic-bezier(.2,.8,.2,1);
}

@keyframes spreadFade {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background:
    radial-gradient(ellipse at center, rgba(60,28,90,0.6), rgba(10,2,20,0.92));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: lbFade 0.25s ease;
}

@keyframes lbFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox-stage {
  position: relative;
  width: min(86vw, 480px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.lightbox .card {
  width: 100%;
  aspect-ratio: 2 / 3;
  cursor: default;
  animation: cardPop 0.4s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

@keyframes cardPop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox .card:hover {
  transform: none;
}

.lightbox .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(var(--holo-angle, 115deg),
      transparent 0%,
      transparent 35%,
      rgba(255,255,255,0.30) 45%,
      rgba(109,228,225,0.30) 50%,
      rgba(255,143,200,0.30) 55%,
      transparent 65%,
      transparent 100%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 5;
  opacity: var(--holo-opacity, 0.6);
  transition: opacity 0.2s ease;
}

.lightbox .card::before {
  opacity: 1;
  background-position: 0% 0%;
  animation: holoSweep 4s linear infinite;
}

@keyframes holoSweep {
  0%   { background-position: 100% 100%; }
  50%  { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

.lightbox-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #fff;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lightbox-controls .btn-nav {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: none;
}

.lightbox-controls .btn-nav:hover:not(:disabled) {
  background: var(--turquoise);
  color: #fff;
  border-color: var(--turquoise);
}

.lightbox-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.btn-lightbox-vote,
.btn-share-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 20px 12px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.55);
  background: linear-gradient(135deg, var(--turquoise), var(--teal));
  color: #fff;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow:
    0 12px 28px -10px rgba(0,183,179,0.85),
    inset 0 1px 0 rgba(255,255,255,0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-lightbox-vote {
  background: linear-gradient(135deg, #ffe27a, #e6b855);
  color: #2a0a3e;
  border-color: rgba(255,255,255,0.8);
  box-shadow:
    0 12px 28px -10px rgba(230,184,85,0.9),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

.btn-lightbox-vote strong {
  min-width: 18px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.btn-lightbox-vote.voted {
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  color: #fff;
  cursor: default;
  box-shadow:
    0 10px 24px -10px rgba(91,28,116,0.75),
    inset 0 1px 0 rgba(255,255,255,0.28);
}

.btn-share-card svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.btn-lightbox-vote svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.btn-lightbox-vote:hover:not(:disabled),
.btn-share-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px -10px rgba(0,183,179,1),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

.btn-lightbox-vote:hover:not(:disabled) {
  background: linear-gradient(135deg, #fff0a4, #f2d177);
  box-shadow:
    0 16px 34px -10px rgba(230,184,85,1),
    inset 0 1px 0 rgba(255,255,255,0.65);
}

.btn-share-card:hover {
  background: linear-gradient(135deg, #6de4e1, var(--turquoise));
}

.btn-share-card.copied {
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
}

.lightbox-meta {
  min-width: 180px;
  text-align: center;
}

.lightbox-meta .meta-num {
  font-family: var(--display);
  font-size: 28px;
  color: #6de4e1;
  letter-spacing: 0;
}

.lightbox-meta .meta-label {
  font-size: 10px;
  letter-spacing: 0.28em;
  opacity: 0.72;
  white-space: nowrap;
}

.btn-close {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 1005;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(26,8,39,0.78);
  border: 1.5px solid rgba(255,255,255,0.42);
  color: #fff;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.2s ease;
  touch-action: manipulation;
}

.btn-close:hover {
  background: var(--purple);
  border-color: var(--purple);
  transform: rotate(90deg);
}

.lb-strip {
  position: absolute;
  top: 24px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.78);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.lb-strip .lb-logo {
  background: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  height: 28px;
  display: flex;
  align-items: center;
}

.lb-strip .lb-logo img {
  height: 100%;
  width: auto;
  display: block;
}

.lb-strip .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--turquoise);
}

/* ============================================
   Misc
   ============================================ */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* responsive */
@media (max-width: 920px) {
  .grid { gap: 14px 12px; }
  .page { padding: 18px 14px 14px; }
  .page-left { padding-right: 26px; }
  .page-right { padding-left: 26px; }
  .header-row { flex-direction: column; align-items: stretch; }
  .counter { text-align: left; }
  .logo { height: 64px; }
  .footer-nav { justify-content: center; }
  .page-indicator { justify-content: center; }
}

@media (max-width: 640px) {
  .spread { grid-template-columns: 1fr; }
  .spine-stitch { display: none; }
  .spread::after { display: none; }
  .page-left, .page-right { padding: 18px 16px; }
}

/* ============================================
   Vital Nutrition · Álbum
   EXTRAS: foil holográfico, portada, separador
   de letra, animación de page-turn
   ============================================ */

/* ────────────────────────────────────────────
   HOLOGRAPHIC FOIL UTILITIES
   ──────────────────────────────────────────── */
.foil-text {
  background:
    linear-gradient(115deg,
      #ff8fc8 0%,
      #b095f0 15%,
      #00b7b3 32%,
      #6de4e1 48%,
      #f2d177 64%,
      #ff8fc8 82%,
      #b095f0 100%);
  background-size: 280% 280%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: foilShift 7s linear infinite;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,0.18))
    drop-shadow(0 0 12px rgba(109,228,225,0.18));
}

.foil-fill {
  background:
    linear-gradient(115deg,
      #ff8fc8 0%,
      #b095f0 15%,
      #00b7b3 32%,
      #6de4e1 48%,
      #f2d177 64%,
      #ff8fc8 82%,
      #b095f0 100%);
  background-size: 280% 280%;
  animation: foilShift 7s linear infinite;
}

@keyframes foilShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.foil-border {
  position: relative;
  isolation: isolate;
}
.foil-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--foil-thick, 2px);
  background:
    linear-gradient(115deg,
      #ff8fc8, #b095f0, #00b7b3, #6de4e1, #f2d177, #ff8fc8);
  background-size: 280% 280%;
  animation: foilShift 7s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

/* foil chrome (heavier metallic with gold lift) */
.foil-chrome {
  background:
    linear-gradient(180deg,
      #fff7d6 0%,
      #f2d177 15%,
      #e6b855 30%,
      #c89042 45%,
      #f2d177 60%,
      #fff7d6 75%,
      #c89042 100%);
  background-size: 100% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,0.35))
    drop-shadow(0 0 14px rgba(242,209,119,0.35));
}

/* ============================================
   ALBUM COVER (closed book entry)
   ============================================ */
.album-cover {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 5%, rgba(109,228,225,0.25), transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0,0,0,0.5), transparent 70%),
    linear-gradient(180deg, #2a0a3e 0%, #4a1462 50%, #1a0c2e 100%);
  perspective: 2200px;
  animation: coverIn 0.5s ease;
}

@keyframes coverIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.album-cover.opening .cover-board {
  transform-origin: left center;
  animation: openCover 0.95s cubic-bezier(.55,.05,.4,.95) forwards;
}

@keyframes openCover {
  0%   { transform: perspective(2200px) rotateY(0deg); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: perspective(2200px) rotateY(-115deg); opacity: 0; }
}

/* confetti dots on cover bg */
.album-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 10% 16%, #6de4e1 0 2.5px, transparent 3px),
    radial-gradient(circle at 88% 22%, #ff8fc8 0 2.5px, transparent 3px),
    radial-gradient(circle at 22% 80%, #f2d177 0 2.5px, transparent 3px),
    radial-gradient(circle at 78% 75%, #ffffff 0 2px,   transparent 2.5px),
    radial-gradient(circle at 14% 40%, #6de4e1 0 1.8px, transparent 2.3px),
    radial-gradient(circle at 90% 58%, #f2d177 0 2.2px, transparent 2.6px),
    radial-gradient(circle at 50% 8%,  #ffffff 0 1.4px, transparent 2px),
    radial-gradient(circle at 60% 92%, #6de4e1 0 1.6px, transparent 2px);
  opacity: 0.85;
}

/* the actual album cover board */
.cover-board {
  position: relative;
  width: min(94vw, 560px);
  height: min(820px, 94vh);
  background:
    radial-gradient(ellipse at 30% 20%, #7a55a3 0%, var(--purple-deep) 60%, var(--purple-deeper) 100%);
  border-radius: 18px;
  padding: 6px;
  box-shadow:
    0 50px 90px -30px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.18);
  will-change: transform, opacity;
}

/* tornasol border ring */
.cover-board::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background:
    linear-gradient(115deg,
      #ff8fc8, #b095f0, #00b7b3, #6de4e1, #f2d177, #ff8fc8);
  background-size: 280% 280%;
  animation: foilShift 7s linear infinite;
  z-index: -1;
  filter: blur(0.5px);
}

.cover-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(109,228,225,0.18), transparent 60%),
    linear-gradient(180deg, #3a0f50 0%, #5b1c74 60%, #2a0a3e 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 3.5vh, 30px) 26px;
  text-align: center;
  color: #fff;
}

/* on short viewports, scale logo + title down to fit */

/* stadium silhouette + grass at the bottom of the cover */
.cover-inner::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background:
    /* grass field */
    linear-gradient(180deg, transparent 0%, rgba(6,68,52,0.4) 40%, rgba(8,46,34,0.85) 100%);
  z-index: 0;
  pointer-events: none;
}

.cover-inner::after {
  /* stadium horizon ring (curved tribune) */
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 28%;
  height: 80px;
  background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(0,0,0,0.55) 0%, transparent 65%);
  z-index: 0;
  pointer-events: none;
}

/* confetti inside the cover */
.cover-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(circle at 12% 14%, #6de4e1 0 2px, transparent 2.5px),
    radial-gradient(circle at 88% 18%, #ff8fc8 0 2px, transparent 2.5px),
    radial-gradient(circle at 76% 36%, #f2d177 0 1.8px, transparent 2.3px),
    radial-gradient(circle at 22% 48%, #ffffff 0 1.4px, transparent 1.9px),
    radial-gradient(circle at 84% 56%, #b095f0 0 1.8px, transparent 2.3px),
    radial-gradient(circle at 14% 70%, #f2d177 0 1.6px, transparent 2px),
    radial-gradient(circle at 50% 10%, #ffffff 0 1.6px, transparent 2px);
}

/* big plus glyphs scattered as brand watermark */
.cover-plus {
  position: absolute;
  width: 32px;
  height: 32px;
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
}
.cover-plus svg { width: 100%; height: 100%; }
.cover-plus.tl { top: 20px; left: 22px; transform: rotate(-12deg); }
.cover-plus.tr { top: 24px; right: 22px; transform: rotate(14deg); width: 26px; height: 26px; }
.cover-plus.bl { bottom: 110px; left: 28px; transform: rotate(18deg); width: 22px; height: 22px; opacity: 0.55; }
.cover-plus.br { bottom: 120px; right: 26px; transform: rotate(-10deg); width: 28px; height: 28px; opacity: 0.6; }

/* cover content stack */
.cover-section {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cover-logo {
  background: #fff;
  border-radius: 14px;
  padding: 14px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(64px, 13vh, 110px);
  box-shadow:
    0 14px 30px -10px rgba(0,0,0,0.6),
    inset 0 -2px 0 rgba(0,0,0,0.06);
  margin-bottom: 14px;
}
.cover-logo img { height: 100%; width: auto; display: block; }

.cover-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #6de4e1;
  margin-bottom: 6px;
}
.cover-eyebrow .line {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #6de4e1, transparent);
}

.cover-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(42px, 9vh, 80px);
  line-height: 0.88;
  margin: 8px 0 6px;
  letter-spacing: -0.015em;
}
.cover-title .word { display: block; }
.cover-title .word.italic { font-style: italic; font-size: 0.78em; margin-top: 4px; }

.cover-tagline {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.86);
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  white-space: nowrap;
}
.cover-tagline .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--turquoise);
}

/* official stamp */
.cover-stamp {
  margin-top: 16px;
  padding: 7px 16px;
  border: 1.5px dashed rgba(109,228,225,0.55);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #6de4e1;
  white-space: nowrap;
}

/* open button */
.btn-open {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px 18px 32px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--purple-deep);
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow:
    0 18px 36px -14px rgba(0,0,0,0.5),
    0 4px 0 rgba(0,0,0,0.18),
    inset 0 -2px 0 rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 22px;
  white-space: nowrap;
  overflow: hidden;
  z-index: 2;
}
.btn-open::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg,
      transparent 30%, rgba(255,255,255,0.85) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 100% 0;
  opacity: 0.7;
  animation: foilSweep 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes foilSweep {
  0%   { background-position: 100% 0; }
  50%  { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}
.btn-open:hover {
  transform: translateY(-2px);
  box-shadow:
    0 24px 44px -14px rgba(0,0,0,0.6),
    0 4px 0 rgba(0,0,0,0.18),
    inset 0 -2px 0 rgba(0,0,0,0.08);
}
.btn-open svg { width: 18px; height: 18px; position: relative; z-index: 2; }
.btn-open span { position: relative; z-index: 2; }

/* meta row at the bottom of cover */
.cover-meta {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 18px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(109,228,225,0.25);
}
.cover-meta-item {
  flex: 1;
  padding: 8px 12px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.cover-meta-item:last-child { border-right: none; }
.cover-meta-num {
  font-family: var(--display);
  font-size: 22px;
  color: #6de4e1;
  line-height: 1;
}
.cover-meta-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
  white-space: nowrap;
}

/* bottom branding strip */
.cover-bottom-strip {
  position: relative;
  z-index: 2;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
}

/* ============================================
   LETTER SEPARATOR PAGE
   ============================================ */
.letter-sep {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  min-height: 100%;
  padding: 32px 24px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(109,228,225,0.10), transparent 60%);
}

.letter-sep::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px dashed rgba(91,28,116,0.22);
  border-radius: 10px;
  pointer-events: none;
}

.letter-sep .sep-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
  white-space: nowrap;
}

.letter-sep .sep-mega {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(140px, 22vw, 200px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  margin: 0;
  /* foil applied via class */
  position: relative;
}

.letter-sep .sep-mega::after {
  /* drop shadow stamp behind giant letter */
  content: attr(data-letter);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(91,28,116,0.10);
  -webkit-text-fill-color: rgba(91,28,116,0.10);
  z-index: -1;
  transform: translate(6px, 6px);
}

.letter-sep .sep-title {
  font-family: var(--display);
  font-size: 26px;
  color: var(--purple-deep);
  margin-top: 8px;
  line-height: 1;
}

.letter-sep .sep-subtitle {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 8px;
  max-width: 80%;
}

.letter-sep .sep-divider {
  width: 60%;
  max-width: 220px;
  height: 1px;
  margin: 22px auto;
  background: linear-gradient(90deg, transparent, rgba(91,28,116,0.4), transparent);
  position: relative;
}
.letter-sep .sep-divider::before {
  content: "✦";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--cardboard);
  padding: 0 8px;
  color: var(--turquoise);
  font-size: 14px;
}

.letter-sep .sep-info {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}
.letter-sep .sep-info-item {
  background: rgba(91,28,116,0.08);
  border: 1px solid rgba(91,28,116,0.18);
  border-radius: 10px;
  padding: 8px 14px;
  text-align: center;
  min-width: 90px;
}
.letter-sep .sep-info-num {
  font-family: var(--display);
  font-size: 22px;
  color: var(--purple-deep);
  line-height: 1;
}
.letter-sep .sep-info-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 4px;
  white-space: nowrap;
}

/* corner pluses on separator */
.letter-sep .sep-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  opacity: 0.55;
}
.letter-sep .sep-corner.tl { top: 28px; left: 28px; transform: rotate(-10deg); }
.letter-sep .sep-corner.tr { top: 28px; right: 28px; transform: rotate(12deg); }
.letter-sep .sep-corner.bl { bottom: 28px; left: 28px; transform: rotate(8deg); }
.letter-sep .sep-corner.br { bottom: 28px; right: 28px; transform: rotate(-14deg); }

/* ============================================
   PAGE TURN FLAP
   ============================================ */
.page-flap {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  z-index: 50;
  transform-style: preserve-3d;
  pointer-events: none;
  perspective: 1800px;
}
.page-flap.next { right: 0; transform-origin: left center; }
.page-flap.prev { left: 0;  transform-origin: right center; }
.page-flap.next { animation: flapNext 0.7s cubic-bezier(.55,.05,.4,.95) forwards; }
.page-flap.prev { animation: flapPrev 0.7s cubic-bezier(.55,.05,.4,.95) forwards; }

.flap-face {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, var(--cardboard) 0%, var(--cardboard-shadow) 100%);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(91,28,116,0.06);
}
.flap-face.front {
  border-radius: 0;
}
.flap-face.back {
  transform: rotateY(180deg);
}

/* page curl shadow */
.flap-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.18) 0%,
      transparent 30%,
      transparent 70%,
      rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}

@keyframes flapNext {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(-180deg); }
}
@keyframes flapPrev {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

/* underside shadow that follows the flap */
.flap-shadow {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  z-index: 49;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 50%, rgba(0,0,0,0) 100%);
  opacity: 0;
  animation: flapShadow 0.7s ease forwards;
}
.flap-shadow.next { right: 0; }
.flap-shadow.prev { left: 0; }
@keyframes flapShadow {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================
   CONTROLS · disable during flip
   ============================================ */
.is-flipping .btn-nav,
.is-flipping .page-dot {
  pointer-events: none;
  opacity: 0.5;
}

/* ============================================
   STADIUM BACKDROP — extra silhouette
   ============================================ */
.stadium-bg {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  height: 38vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}

.stadium-bg::before {
  /* tribune silhouette curve */
  content: "";
  position: absolute;
  left: -5%; right: -5%;
  bottom: 12vh;
  height: 14vh;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(0,0,0,0.55) 0%, transparent 70%);
}

.stadium-bg::after {
  /* tiny crowd dots line */
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 18vh;
  height: 28px;
  background-image:
    radial-gradient(circle at 6% 50%,  rgba(255,255,255,0.18) 0 1.4px, transparent 2px),
    radial-gradient(circle at 11% 60%, rgba(109,228,225,0.18) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 18% 40%, rgba(255,255,255,0.16) 0 1.4px, transparent 2px),
    radial-gradient(circle at 26% 60%, rgba(242,209,119,0.18) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 35% 50%, rgba(255,143,200,0.18) 0 1.4px, transparent 2px),
    radial-gradient(circle at 44% 60%, rgba(255,255,255,0.18) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 55% 50%, rgba(109,228,225,0.18) 0 1.4px, transparent 2px),
    radial-gradient(circle at 66% 60%, rgba(255,255,255,0.18) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 74% 50%, rgba(242,209,119,0.18) 0 1.4px, transparent 2px),
    radial-gradient(circle at 82% 60%, rgba(255,255,255,0.18) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 90% 50%, rgba(255,143,200,0.18) 0 1.4px, transparent 2px),
    radial-gradient(circle at 96% 60%, rgba(109,228,225,0.18) 0 1.4px, transparent 2px);
  opacity: 0.6;
}

/* tribune row band */
.stadium-bg .tier {
  position: absolute;
  left: -10%; right: -10%;
  height: 26px;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.1));
  border-top: 1px solid rgba(109,228,225,0.18);
  transform-origin: center;
}
.stadium-bg .tier.t1 { bottom: 19vh; height: 38px; border-radius: 50% / 24px 24px 0 0; }
.stadium-bg .tier.t2 { bottom: 23vh; height: 30px; border-radius: 50% / 18px 18px 0 0; opacity: 0.7; }

/* "back to cover" mini button */
.btn-cover-return {
  position: relative;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-cover-return:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.btn-cover-return svg { width: 12px; height: 12px; }

/* ============================================
   Holographic decorations - + glyphs animated
   ============================================ */
.holo-plus {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================
   Vital Nutrition · Álbum · PATCHES
   Brand pass: stadium bg, white pages, white logo,
   prismatic AGGRESSIVE foil holográfico, paw graphics
   Loaded LAST – wins all earlier rules
   ============================================ */

/* ────────────────────────────────────────────
   BODY: stadium photo, color-graded
   ──────────────────────────────────────────── */
html, body {
  background: var(--purple-deeper);
}

body {
  background:
    /* moody brand-color overlay */
    linear-gradient(180deg,
      rgba(20,5,35,0.78) 0%,
      rgba(91,28,116,0.62) 35%,
      rgba(58,15,80,0.55) 60%,
      rgba(8,38,38,0.85) 100%),
    /* lights / ambient pink + teal */
    radial-gradient(ellipse 60% 40% at 12% 0%, rgba(255,180,90,0.18), transparent 60%),
    radial-gradient(ellipse 50% 35% at 92% 8%, rgba(109,228,225,0.18), transparent 60%),
    /* stadium photo */
    url("../img/album-cover-art.png") center 28% / cover no-repeat;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* kill the old "stars" confetti & grass stripes – the photo replaces them */
body::before,
body::after { content: none !important; display: none !important; }

/* fixed-stadium decoration is no longer needed either */
.stadium-bg { display: none; }

/* ────────────────────────────────────────────
   PRISMATIC RAYS utility — aggressive holo
   ──────────────────────────────────────────── */
.prism-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(255,143,200,0.55) 14deg,
      transparent 28deg,
      rgba(176,149,240,0.50) 50deg,
      transparent 70deg,
      rgba(0,183,179,0.55) 95deg,
      transparent 115deg,
      rgba(109,228,225,0.55) 140deg,
      transparent 160deg,
      rgba(242,209,119,0.55) 185deg,
      transparent 205deg,
      rgba(255,143,200,0.50) 230deg,
      transparent 250deg,
      rgba(176,149,240,0.55) 275deg,
      transparent 295deg,
      rgba(0,183,179,0.55) 320deg,
      transparent 340deg,
      rgba(242,209,119,0.55) 358deg,
      transparent 360deg);
  mix-blend-mode: screen;
  filter: blur(0.3px);
  animation: rotateRays 30s linear infinite;
}

.prism-rays.fast { animation-duration: 14s; }
.prism-rays.subtle { opacity: 0.5; }
.prism-rays.intense {
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(255,143,200,0.85) 10deg,
      transparent 22deg,
      rgba(176,149,240,0.85) 42deg,
      transparent 58deg,
      rgba(0,183,179,0.85) 80deg,
      transparent 100deg,
      rgba(109,228,225,0.85) 122deg,
      transparent 140deg,
      rgba(242,209,119,0.85) 162deg,
      transparent 180deg,
      rgba(255,255,255,0.6) 200deg,
      transparent 218deg,
      rgba(255,143,200,0.85) 238deg,
      transparent 256deg,
      rgba(176,149,240,0.85) 278deg,
      transparent 296deg,
      rgba(0,183,179,0.85) 320deg,
      transparent 338deg,
      rgba(242,209,119,0.85) 358deg,
      transparent 360deg);
}

@keyframes rotateRays {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* prismatic linear sweep — for bands/strips */
.prism-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg,
      rgba(255,143,200,0) 0%,
      rgba(255,143,200,0.45) 8%,
      rgba(176,149,240,0) 16%,
      rgba(176,149,240,0.45) 24%,
      rgba(0,183,179,0) 32%,
      rgba(0,183,179,0.45) 40%,
      rgba(109,228,225,0) 48%,
      rgba(109,228,225,0.45) 56%,
      rgba(242,209,119,0) 64%,
      rgba(242,209,119,0.45) 72%,
      rgba(255,143,200,0) 80%,
      rgba(255,143,200,0.45) 88%,
      rgba(0,183,179,0) 96%);
  background-size: 300% 100%;
  mix-blend-mode: screen;
  animation: sweepHolo 6s linear infinite;
}
@keyframes sweepHolo {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}

/* ────────────────────────────────────────────
   BUFF foil-text & foil-chrome (more saturated)
   ──────────────────────────────────────────── */
.foil-text {
  background:
    linear-gradient(115deg,
      #ff61b0 0%,
      #a684ff 14%,
      #00d4cf 28%,
      #84ffea 42%,
      #ffe384 56%,
      #ff61b0 72%,
      #a684ff 88%,
      #00d4cf 100%);
  background-size: 320% 320%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: foilShift 5s linear infinite;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,0.22))
    drop-shadow(0 0 18px rgba(255,143,200,0.35));
}

.foil-chrome {
  background:
    linear-gradient(180deg,
      #fff5cc 0%,
      #fcdc7a 20%,
      #d99f3a 40%,
      #b07a26 55%,
      #fcdc7a 75%,
      #fff5cc 100%);
  background-size: 100% 220%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,0.42))
    drop-shadow(0 0 16px rgba(252,220,122,0.45));
  animation: chromeShift 4s ease-in-out infinite;
}

@keyframes chromeShift {
  0%   { background-position: 0 0%; }
  50%  { background-position: 0 100%; }
  100% { background-position: 0 0%; }
}

/* ────────────────────────────────────────────
   HEADER – logo WHITE direct, no box
   ──────────────────────────────────────────── */
.logo {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: clamp(56px, 6vw, 74px) !important;
}
.logo img {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* header gets a subtle holographic shimmer overlay */
.header {
  position: relative;
  overflow: hidden;
}
.header > .header-row { position: relative; z-index: 3; }
.header::before,
.header::after { z-index: 1; }

.header .header-prism {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,143,200,0.12) 22%,
      rgba(109,228,225,0.18) 40%,
      rgba(242,209,119,0.12) 58%,
      transparent 80%);
  background-size: 220% 100%;
  mix-blend-mode: screen;
  animation: sweepHolo 9s linear infinite;
  z-index: 2;
}

/* ────────────────────────────────────────────
   PAGES – WHITE & clean (no cardboard look)
   ──────────────────────────────────────────── */
.spread {
  background: #ffffff !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.7),
    inset 0 -2px 0 rgba(91,28,116,0.04) !important;
}

/* kill paper grain dots */
.spread::before { content: none !important; }

/* keep spine fold but lighter */
.spread::after {
  background:
    linear-gradient(90deg,
      rgba(91,28,116,0)   0%,
      rgba(91,28,116,0.06) 22%,
      rgba(91,28,116,0.32) 50%,
      rgba(91,28,116,0.06) 78%,
      rgba(91,28,116,0)   100%) !important;
}

.spine-stitch {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(91,28,116,0.5) 0 5px,
      transparent 5px 14px) !important;
}

/* page inner shadow toward spine (light) */
.page-left {
  background: linear-gradient(to left,
    rgba(91,28,116,0) 0%,
    rgba(91,28,116,0.05) 35%,
    rgba(91,28,116,0) 100%) !important;
}
.page-right {
  background: linear-gradient(to right,
    rgba(91,28,116,0) 0%,
    rgba(91,28,116,0.05) 35%,
    rgba(91,28,116,0) 100%) !important;
}

/* page header dashed underline – brand turquoise */
.page-header {
  border-bottom: 2px dashed rgba(0,183,179,0.55) !important;
}

/* letter-chip → holographic */
.letter-chip {
  background:
    linear-gradient(115deg,
      #ff61b0, #a684ff, #00d4cf, #84ffea, #ffe384, #ff61b0) !important;
  background-size: 280% 280% !important;
  animation: foilShift 5s linear infinite;
  color: var(--purple-deep) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.18),
    0 0 0 1px rgba(91,28,116,0.15) !important;
}

.page-section {
  color: var(--purple-deep) !important;
}

.page-flag {
  color: var(--teal) !important;
}

/* ────────────────────────────────────────────
   SLOT NUMBER & EMPTY SLOT – aggressive holo
   ──────────────────────────────────────────── */
.slot-number {
  background:
    linear-gradient(115deg, #ff61b0, #a684ff, #00d4cf, #84ffea, #ffe384, #ff61b0) !important;
  background-size: 280% 280% !important;
  animation: foilShift 5s linear infinite;
  color: var(--purple-deep) !important;
  border: 1.5px solid rgba(255,255,255,0.6) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  box-shadow:
    0 2px 0 rgba(91,28,116,0.25),
    0 0 0 1px rgba(91,28,116,0.18) !important;
  font-weight: 600;
}

.slot.filled .slot-number {
  background:
    linear-gradient(115deg, #ff61b0, #a684ff, #00d4cf, #84ffea, #ffe384, #ff61b0) !important;
  color: var(--purple-deep) !important;
  border-color: #fff !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.2),
    0 0 0 2px rgba(0,183,179,0.5) !important;
}

/* ---- Empty slot · holographic frame + rays ---- */
.slot-empty {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: #ffffff !important;
  border: 0 !important;          /* override old dashed */
  transition: transform 0.2s ease;
}

.slot-empty:hover {
  transform: translateY(-2px);
}

/* holographic foil dashed-look frame */
.slot-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 3px;
  background:
    linear-gradient(115deg, #ff61b0, #a684ff, #00d4cf, #84ffea, #ffe384, #ff61b0, #a684ff);
  background-size: 320% 320%;
  animation: foilShift 5s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* dashed inset overlay – brand turquoise on top */
.slot-empty::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 9px;
  border: 1.5px dashed rgba(0,183,179,0.7);
  pointer-events: none;
  z-index: 2;
}

/* prismatic rays behind the plus */
.slot-empty .slot-empty-bg {
  position: absolute;
  inset: 8px;
  border-radius: 9px;
  pointer-events: none;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(255,143,200,0.32) 14deg,
      transparent 30deg,
      rgba(0,183,179,0.32) 56deg,
      transparent 74deg,
      rgba(242,209,119,0.32) 100deg,
      transparent 118deg,
      rgba(176,149,240,0.32) 144deg,
      transparent 162deg,
      rgba(109,228,225,0.32) 188deg,
      transparent 208deg,
      rgba(255,143,200,0.32) 234deg,
      transparent 252deg,
      rgba(0,183,179,0.32) 278deg,
      transparent 298deg,
      rgba(242,209,119,0.32) 324deg,
      transparent 358deg);
  mix-blend-mode: screen;
  animation: rotateRays 25s linear infinite;
  z-index: 1;
}

.slot-empty:hover .slot-empty-bg {
  animation-duration: 12s;
  filter: saturate(1.4) brightness(1.1);
}

.slot-empty-content {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
}

.slot-empty-content .plus-glyph,
.slot-empty-content .holo-plus {
  width: 50px;
  height: 50px;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
.slot-empty:hover .holo-plus {
  transform: rotate(8deg) scale(1.08);
}

.slot-empty .empty-label {
  color: var(--purple-deep) !important;
  opacity: 0.92 !important;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.slot-empty .empty-hint {
  color: var(--teal) !important;
  opacity: 1 !important;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

/* ────────────────────────────────────────────
   CARDS — stronger holo + prismatic rays behind
   ──────────────────────────────────────────── */
.card {
  background:
    conic-gradient(
      from 0deg,
      #ff61b0 0deg,
      #a684ff 50deg,
      #00d4cf 100deg,
      #84ffea 140deg,
      #ffe384 180deg,
      #ff61b0 220deg,
      #a684ff 260deg,
      #00d4cf 300deg,
      #ff61b0 360deg) !important;
  background-size: 220% 220% !important;
  animation: holoShift 7s linear infinite !important;
}

@keyframes holoShift {
  0%   { filter: hue-rotate(0deg)  saturate(1.15) brightness(1.0);
         background-position: 0% 50%; }
  50%  { filter: hue-rotate(28deg) saturate(1.35) brightness(1.1);
         background-position: 100% 50%; }
  100% { filter: hue-rotate(0deg)  saturate(1.15) brightness(1.0);
         background-position: 0% 50%; }
}

.card-inner {
  background:
    radial-gradient(circle at 50% 35%,
      #2a1450 0%, #14062a 70%, #060114 100%) !important;
}

/* prismatic rays inside the card behind any letterbox bars */
.card-inner::before {
  background:
    conic-gradient(from 0deg at 50% 45%,
      transparent 0deg,
      rgba(255,143,200,0.45) 14deg,
      transparent 32deg,
      rgba(176,149,240,0.45) 56deg,
      transparent 74deg,
      rgba(0,183,179,0.45) 96deg,
      transparent 114deg,
      rgba(109,228,225,0.45) 138deg,
      transparent 156deg,
      rgba(242,209,119,0.45) 180deg,
      transparent 198deg,
      rgba(255,255,255,0.35) 222deg,
      transparent 240deg,
      rgba(255,143,200,0.45) 262deg,
      transparent 280deg,
      rgba(176,149,240,0.45) 302deg,
      transparent 320deg,
      rgba(0,183,179,0.45) 344deg,
      transparent 360deg) !important;
  opacity: 0.85 !important;
  animation: rotateRays 22s linear infinite;
}

/* card logo: white logo on dark, no box */
.card-logo {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: 22px !important;
  bottom: 8px !important;
  right: 8px !important;
}
.card-logo img {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.65));
}

/* card number — larger and prominent */
.card-num {
  font-size: 28px !important;
  top: 8px !important;
  left: 10px !important;
}

/* ────────────────────────────────────────────
   LETTER TAB (A–Z) NAV
   ──────────────────────────────────────────── */
.letter-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.letter-tab {
  width: 30px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid transparent;
  color: rgba(255,255,255,0.78);
  font-family: var(--display);
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.18s ease;
  position: relative;
  flex-shrink: 0;
}

.letter-tab:hover:not(:disabled) {
  background: rgba(255,255,255,0.16);
  color: #fff;
  transform: translateY(-1px);
}

.letter-tab.active {
  background:
    linear-gradient(115deg, #ff61b0, #a684ff, #00d4cf, #84ffea, #ffe384, #ff61b0) !important;
  background-size: 280% 280% !important;
  animation: foilShift 5s linear infinite;
  color: var(--purple-deep) !important;
  border-color: rgba(255,255,255,0.5);
  font-weight: 600;
  transform: scale(1.08);
  box-shadow: 0 6px 16px -4px rgba(255,143,200,0.7);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.letter-tab.has-cards::after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 6px rgba(242,209,119,0.8);
}

.letter-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ────────────────────────────────────────────
   BUTTON · "Quitar tarjeta" en lightbox
   ──────────────────────────────────────────── */
.btn-remove-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,143,200,0.14);
  border: 1px solid rgba(255,143,200,0.55);
  color: #ff9fd0;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-remove-card:hover {
  background: rgba(255,143,200,0.32);
  border-color: #ff8fc8;
  color: #fff;
  transform: translateY(-1px);
}

.btn-remove-card svg {
  width: 16px;
  height: 16px;
}

/* ────────────────────────────────────────────
   BTN-UPLOAD · foil shimmer overlay
   ──────────────────────────────────────────── */
.btn-upload {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-upload::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg,
      transparent 30%,
      rgba(255,255,255,0.55) 50%,
      transparent 70%);
  background-size: 240% 100%;
  background-position: 100% 0;
  animation: foilSweepBtn 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.btn-upload > * { position: relative; z-index: 2; }

@keyframes foilSweepBtn {
  0%   { background-position: 100% 0; }
  50%  { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* ────────────────────────────────────────────
   COVER · stadium background + aggressive holo
   ──────────────────────────────────────────── */
.album-cover {
  background:
    /* purple/teal overlay */
    linear-gradient(180deg,
      rgba(20,5,35,0.65) 0%,
      rgba(91,28,116,0.45) 35%,
      rgba(20,40,40,0.78) 100%),
    /* stadium photo */
    url("../img/album-cover-art.png") center 30% / cover no-repeat !important;
}

.cover-board::before {
  /* thicker animated holo border */
  background:
    linear-gradient(115deg,
      #ff61b0, #a684ff, #00d4cf, #84ffea, #ffe384,
      #ff61b0, #a684ff, #00d4cf) !important;
  background-size: 320% 320% !important;
  animation: foilShift 4s linear infinite !important;
}

.cover-inner {
  background:
    /* darker purple grade so the prismatic rays + stadium read clearly */
    linear-gradient(180deg,
      rgba(20,5,35,0.65) 0%,
      rgba(91,28,116,0.40) 50%,
      rgba(20,5,35,0.75) 100%),
    radial-gradient(ellipse at 50% 28%, rgba(109,228,225,0.30), transparent 60%),
    url("../img/album-cover-art.png") center 28% / cover no-repeat !important;
}

/* stronger title halo */
.cover-section {
  position: relative;
}
.cover-section .cover-title {
  position: relative;
  z-index: 2;
}
.cover-section .cover-title::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(255,143,200,0.5) 14deg,
      transparent 32deg,
      rgba(0,183,179,0.5) 60deg,
      transparent 80deg,
      rgba(242,209,119,0.5) 110deg,
      transparent 130deg,
      rgba(176,149,240,0.5) 160deg,
      transparent 180deg,
      rgba(109,228,225,0.5) 210deg,
      transparent 232deg,
      rgba(255,143,200,0.5) 260deg,
      transparent 282deg,
      rgba(0,183,179,0.5) 310deg,
      transparent 332deg,
      rgba(242,209,119,0.5) 358deg,
      transparent 360deg);
  mix-blend-mode: screen;
  animation: rotateRays 30s linear infinite;
  z-index: -1;
  filter: blur(2px);
  opacity: 0.85;
}

/* cover logo direct white, no box */
.cover-logo {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: clamp(72px, 14vh, 124px) !important;
  margin-bottom: 12px !important;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.55));
}

/* cover-confetti: brighter, gold-biased to match the posteo */
.cover-confetti {
  background-image:
    radial-gradient(circle at 8%  10%, #f2d177 0 3px, transparent 4px),
    radial-gradient(circle at 92% 16%, #6de4e1 0 3px, transparent 4px),
    radial-gradient(circle at 70% 28%, #ff8fc8 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 22% 22%, #f2d177 0 2px, transparent 3px),
    radial-gradient(circle at 84% 42%, #ffffff 0 2px, transparent 2.8px),
    radial-gradient(circle at 32% 58%, #f2d177 0 2.5px, transparent 3.2px),
    radial-gradient(circle at 76% 64%, #b095f0 0 2.4px, transparent 3px),
    radial-gradient(circle at 18% 68%, #f2d177 0 2px, transparent 2.8px),
    radial-gradient(circle at 50% 38%, #6de4e1 0 1.6px, transparent 2.1px),
    radial-gradient(circle at 60% 80%, #f2d177 0 2px, transparent 2.6px) !important;
  opacity: 1 !important;
}

/* progress line under cover meta */
.cover-progress-line {
  margin-top: 14px;
  color: #6de4e1;
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

/* paw print decorations */
.paw-deco {
  position: absolute;
  opacity: 0.28;
  pointer-events: none;
  color: #6de4e1;
}

/* ────────────────────────────────────────────
   LIGHTBOX · logo no box, more holo
   ──────────────────────────────────────────── */
.lb-strip .lb-logo {
  background: transparent !important;
  padding: 0 !important;
  height: 32px !important;
}
.lb-strip .lb-logo img {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.lightbox {
  background:
    radial-gradient(ellipse at center, rgba(91,28,116,0.55), rgba(10,2,20,0.94)) !important;
}

/* ────────────────────────────────────────────
   LETTER SEPARATOR · cleaner white + heavy holo
   ──────────────────────────────────────────── */
.letter-sep {
  background: #fff !important;
}

.letter-sep::before {
  border: 2px dashed rgba(0,183,179,0.45) !important;
}

/* prismatic rays radiating from behind the giant letter */
.letter-sep .sep-mega {
  position: relative;
  z-index: 2;
}
.letter-sep .sep-mega::before {
  content: "";
  position: absolute;
  inset: -45% -50%;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(255,143,200,0.45) 12deg,
      transparent 28deg,
      rgba(176,149,240,0.45) 50deg,
      transparent 66deg,
      rgba(0,183,179,0.50) 88deg,
      transparent 106deg,
      rgba(109,228,225,0.45) 130deg,
      transparent 146deg,
      rgba(242,209,119,0.50) 172deg,
      transparent 190deg,
      rgba(255,143,200,0.45) 214deg,
      transparent 232deg,
      rgba(176,149,240,0.45) 258deg,
      transparent 276deg,
      rgba(0,183,179,0.45) 300deg,
      transparent 318deg,
      rgba(242,209,119,0.45) 346deg,
      transparent 360deg);
  mix-blend-mode: multiply;
  filter: blur(6px);
  opacity: 0.7;
  animation: rotateRays 28s linear infinite;
  z-index: -1;
  border-radius: 50%;
}

/* corner + glyphs more visible */
.letter-sep .sep-corner {
  opacity: 0.85 !important;
  width: 34px !important;
  height: 34px !important;
}

/* separator title color */
.letter-sep .sep-title {
  color: var(--purple-deep) !important;
}

/* sep info cards */
.letter-sep .sep-info-item {
  background: linear-gradient(135deg, rgba(0,183,179,0.10), rgba(91,28,116,0.05)) !important;
  border: 1px solid rgba(0,183,179,0.35) !important;
}

/* divider star */
.letter-sep .sep-divider::before {
  background: #ffffff !important;
}

/* paw on separator (decorative) */
.letter-sep .sep-paw {
  position: absolute;
  width: 38px;
  height: 38px;
  color: rgba(0,183,179,0.35);
  opacity: 0.9;
  pointer-events: none;
}
.letter-sep .sep-paw.left  { bottom: 80px; left: 18%; transform: rotate(-14deg); }
.letter-sep .sep-paw.right { bottom: 60px; right: 16%; transform: rotate(18deg); }

.letter-sep .sep-ball {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 14%;
  right: 12%;
  opacity: 0.55;
  pointer-events: none;
}

/* ────────────────────────────────────────────
   COVER · paw print decorations
   ──────────────────────────────────────────── */
.cover-paw {
  position: absolute;
  pointer-events: none;
  opacity: 0.18;
  z-index: 1;
  color: #ffffff;
}
.cover-paw.tl { top: 70px;  left: 24px;  width: 38px; height: 38px; transform: rotate(-22deg); }
.cover-paw.br { bottom: 90px; right: 22px; width: 32px; height: 32px; transform: rotate(18deg); }

.cover-ball {
  position: absolute;
  pointer-events: none;
  opacity: 0.45;
  z-index: 1;
}
.cover-ball.tr { top: 70px;  right: 28px; width: 32px; height: 32px; }
.cover-ball.bl { bottom: 88px; left: 28px; width: 28px; height: 28px; }

/* ────────────────────────────────────────────
   BOOK outer · holo border accent
   ──────────────────────────────────────────── */
.book {
  position: relative;
  background: rgba(20,5,35,0.65) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow:
    0 40px 80px -28px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(109,228,225,0.18) !important;
}

.book::before {
  /* animate the dashed inner border with holo color */
  border-color: rgba(255,255,255,0.18) !important;
}

/* ────────────────────────────────────────────
   FOOTER pill — letra + páginas display
   ──────────────────────────────────────────── */
.page-pill {
  background: rgba(0,0,0,0.32) !important;
  border-color: rgba(255,255,255,0.16) !important;
}

/* counter card slightly darker for new bg */
.counter {
  background: rgba(0,0,0,0.32) !important;
}

/* ============================================
   Vital Nutrition · Álbum · PATCHES 2
   - Tamaño grande de portada y libro
   - Zoom in / out controls
   - Back cover (contraportada)
   - Floating "Volver a portada"
   ============================================ */

/* ────────────────────────────────────────────
   BIGGER ALBUM + COVER
   ──────────────────────────────────────────── */
.app {
  max-width: 1680px !important;
  padding: 18px 18px 36px !important;
}

@media (min-width: 1024px) {
  .header {
    padding: 18px 28px 22px !important;
    margin-bottom: 16px !important;
  }
  .header-title {
    font-size: clamp(30px, 3.8vw, 44px) !important;
  }
  .logo {
    height: clamp(54px, 5.4vw, 70px) !important;
  }
}

.book-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  position: relative;
  padding: 6px 0;
}

.book {
  width: 100%;
  max-width: 1480px;
  transform-origin: top center;
  transition: zoom 0.25s ease;
}

/* page padding tighter to give cards more room */
.page {
  padding: 22px 24px 18px !important;
}

@media (min-width: 1280px) {
  .page {
    padding: 28px 30px 22px !important;
  }
  .grid {
    gap: 26px 22px !important;
  }
}

/* COVER: más grande, más espacio para título en itálica */
.cover-board {
  width: min(96vw, 860px) !important;
  height: min(96vh, 1120px) !important;
}

.cover-inner {
  padding: clamp(28px, 5vh, 48px) clamp(36px, 6vw, 60px) !important;
  gap: 10px !important;
  justify-content: center !important;
}

/* LOGO más protagonista (escalón más) */
.cover-logo {
  height: clamp(140px, 24vh, 220px) !important;
  margin-bottom: 8px !important;
}

/* Título: más grande + margen lateral generoso para que la 'e' final no se corte */
.cover-title {
  font-size: clamp(54px, 11vh, 96px) !important;
  line-height: 0.92 !important;
  margin: 6px 0 !important;
  padding: 0 0.5em !important;       /* buffer para la itálica saliente */
  width: 100%;
  text-align: center;
}

.cover-title .word {
  display: block;
  white-space: nowrap;               /* nunca quiebra a 2 líneas */
}

.cover-title .word.italic {
  font-size: clamp(38px, 7.5vh, 72px) !important;
  margin-top: 4px !important;
  /* itálica necesita más espacio a la derecha por el slant */
  padding-right: 0.22em;
  display: inline-block;
}

/* tagline + stamp + meta + botón más grandes (escalón más) */
.cover-tagline {
  font-size: 14px !important;
  letter-spacing: 0.22em !important;
  margin-top: 18px !important;
  gap: 12px !important;
}

.cover-stamp {
  font-size: 13px !important;
  letter-spacing: 0.28em !important;
  padding: 9px 22px !important;
  margin-top: 10px !important;
}

.btn-open {
  padding: 20px 36px !important;
  font-size: 16px !important;
  letter-spacing: 0.24em !important;
  margin-top: 22px !important;
  gap: 14px !important;
}
.btn-open svg { width: 22px !important; height: 22px !important; }

.cover-meta {
  margin-top: 22px !important;
}
.cover-meta-num {
  font-size: 28px !important;
}
.cover-meta-label {
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
  margin-top: 4px !important;
}
.cover-meta-item {
  padding: 12px 14px !important;
}

.btn-open + .cover-meta,
.btn-open ~ .cover-meta { margin-top: 22px !important; }

/* eyebrow también un toque más grande */
.cover-eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.34em !important;
}

/* remove old duplicate btn-open block from earlier patch */
.cover-section { gap: 6px; }

/* ============================================
   BG OVERLAY (only when album is open, not cover)
   ============================================ */
.bg-open-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(15,3,30,0.62) 0%,
      rgba(58,15,80,0.55) 35%,
      rgba(40,15,70,0.50) 65%,
      rgba(10,2,18,0.65) 100%);
}

.app {
  position: relative;
  z-index: 2;
}

/* ────────────────────────────────────────────
   ZOOM CONTROLS
   ──────────────────────────────────────────── */
.zoom-controls {
  display: inline-flex;
  align-items: stretch;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  padding: 3px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn-zoom {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  transition: all 0.18s ease;
}

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

.btn-zoom:hover:not(:disabled) {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.btn-zoom:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-zoom.zoom-val {
  min-width: 56px;
  width: auto;
  padding: 0 10px;
  color: #6de4e1;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0;
}

/* ────────────────────────────────────────────
   FLOATING "Volver a portada" PILL
   ──────────────────────────────────────────── */
.btn-floating-cover {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  background:
    linear-gradient(135deg,
      rgba(0,0,0,0.5) 0%,
      rgba(91,28,116,0.55) 100%);
  border: 1.5px solid rgba(109,228,225,0.5);
  color: #fff;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 10px 24px -10px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-floating-cover svg {
  width: 16px;
  height: 16px;
  color: #6de4e1;
}

.btn-floating-cover:hover {
  transform: translateY(-1px);
  border-color: var(--turquoise);
  box-shadow:
    0 14px 30px -8px rgba(0,183,179,0.5),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

@media (max-width: 640px) {
  .btn-floating-cover span { display: none; }
  .btn-floating-cover {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
}

/* ────────────────────────────────────────────
   FLAP face → white (since pages are white now)
   ──────────────────────────────────────────── */
.flap-face {
  background:
    radial-gradient(ellipse at 50% 30%, #ffffff 0%, #F0EEF6 100%) !important;
}

/* ────────────────────────────────────────────
   BACK INSIDE (left page of last spread)
   ──────────────────────────────────────────── */
.page-back-inside,
.page-back-cover {
  padding: 0 !important;
  background: none !important;
}

.back-inside-page {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 540px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(109,228,225,0.10), transparent 60%),
    #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-inside-page .prism-rays {
  inset: -10%;
  opacity: 0.35;
  filter: blur(2px);
}

.bi-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.bi-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
}

.bi-eyebrow .line {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
}

.bi-title {
  font-family: var(--display);
  font-size: clamp(36px, 6vw, 58px);
  line-height: 1.0;
  margin: 0;
}

.bi-quote {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  font-style: italic;
  color: var(--purple-deep);
  opacity: 0.78;
  margin: -4px 0 6px;
  max-width: 280px;
  white-space: normal;
}

.bi-stats {
  display: flex;
  gap: 14px;
}

.bi-stat {
  min-width: 80px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(0,183,179,0.10), rgba(91,28,116,0.05));
  border: 1px solid rgba(0,183,179,0.35);
  border-radius: 12px;
  text-align: center;
}

.bi-stat-num {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
}

.bi-stat-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 4px;
  white-space: nowrap;
}

.bi-pets {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.bi-pet {
  width: 56px;
  height: 56px;
  color: var(--purple-deep);
}

.bi-pets .holo-plus {
  width: 30px;
  height: 30px;
}

.bi-tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
}

/* ────────────────────────────────────────────
   BACK COVER (right page of last spread)
   ──────────────────────────────────────────── */
.back-cover-page {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 540px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(109,228,225,0.18), transparent 60%),
    linear-gradient(135deg, #7a55a3 0%, var(--purple-deep) 50%, var(--purple-deeper) 100%);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-cover-page .prism-rays {
  inset: -20%;
  opacity: 0.75;
  filter: blur(1px);
  mix-blend-mode: screen;
}

.bc-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.bc-pets-row {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

.bc-pet {
  width: 64px;
  height: 64px;
  color: #fff;
  opacity: 0.92;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}

.bc-logo-wrap {
  width: 85%;
  max-width: 320px;
  margin: 8px 0;
}

.bc-logo-wrap img {
  width: 100%;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 6px 18px rgba(0,0,0,0.55))
    drop-shadow(0 0 18px rgba(109,228,225,0.45));
}

.bc-strap {
  font-family: var(--display);
  font-size: 22px;
  color: #6de4e1;
  letter-spacing: 0.01em;
  line-height: 1;
}

.bc-tagline {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
}

.bc-subline {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
}

.bc-plus-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.bc-plus-row .holo-plus {
  width: 18px;
  height: 18px;
  opacity: 0.85;
}

.bc-bottom {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
}

.bc-paw {
  position: absolute;
  color: #ffffff;
  opacity: 0.12;
  z-index: 1;
  pointer-events: none;
}
.bc-paw.tl { top: 22px; left: 22px; width: 44px; height: 44px; transform: rotate(-22deg); }
.bc-paw.br { bottom: 30px; right: 22px; width: 36px; height: 36px; transform: rotate(18deg); }

/* ============================================
   Vital Nutrition · Álbum · PATCHES 3
   Replace the "rotating rectangle" prism rays
   with a SOFT DIAGONAL GLARE SWEEP — diffused
   edges, slow elegant motion, no visible shape.
   ============================================ */

/* ────────────────────────────────────────────
   Soft diagonal glare — keyframes
   ──────────────────────────────────────────── */
@keyframes glareSweep {
  0%   { background-position: 140% 140%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { background-position: -40% -40%; opacity: 0; }
}

@keyframes glareSweepLoop {
  0%   { background-position: 130% 130%; }
  50%  { background-position: -30% -30%; }
  100% { background-position: 130% 130%; }
}

/* ────────────────────────────────────────────
   Generic .prism-rays → soft diagonal glare
   ──────────────────────────────────────────── */
.prism-rays {
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 30%,
      rgba(255,143,200,0.18) 42%,
      rgba(255,255,255,0.42) 50%,
      rgba(109,228,225,0.22) 58%,
      transparent 70%,
      transparent 100%) !important;
  background-size: 240% 240% !important;
  background-position: 130% 130% !important;
  background-repeat: no-repeat !important;
  filter: blur(12px) !important;
  mix-blend-mode: screen;
  animation: glareSweepLoop 14s ease-in-out infinite !important;
  transform: none !important;
  border-radius: 0 !important;
  opacity: 0.95;
}

.prism-rays.subtle {
  opacity: 0.65;
  filter: blur(16px) !important;
}

.prism-rays.intense {
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 24%,
      rgba(255,143,200,0.30) 38%,
      rgba(255,255,255,0.65) 50%,
      rgba(109,228,225,0.32) 62%,
      transparent 76%,
      transparent 100%) !important;
  background-size: 240% 240% !important;
  filter: blur(10px) !important;
  animation: glareSweepLoop 11s ease-in-out infinite !important;
}

.prism-rays.fast {
  animation-duration: 8s !important;
}

/* ────────────────────────────────────────────
   Cover title halo → soft glare instead of conic
   ──────────────────────────────────────────── */
.cover-section .cover-title::before {
  content: "";
  position: absolute;
  inset: -25% -15% !important;
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 28%,
      rgba(255,143,200,0.28) 42%,
      rgba(255,255,255,0.55) 50%,
      rgba(109,228,225,0.30) 58%,
      transparent 72%,
      transparent 100%) !important;
  background-size: 240% 240% !important;
  background-position: 130% 130%;
  background-repeat: no-repeat;
  filter: blur(14px) !important;
  mix-blend-mode: screen;
  animation: glareSweepLoop 13s ease-in-out infinite !important;
  transform: none !important;
  border-radius: 0 !important;
  opacity: 0.9;
  z-index: -1;
}

/* ────────────────────────────────────────────
   Cards: replace rotating rays behind image
   ──────────────────────────────────────────── */
.card-inner::before {
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 30%,
      rgba(255,143,200,0.30) 42%,
      rgba(255,255,255,0.55) 50%,
      rgba(109,228,225,0.30) 58%,
      transparent 70%,
      transparent 100%) !important;
  background-size: 240% 240% !important;
  background-position: 130% 130%;
  background-repeat: no-repeat;
  filter: blur(10px) !important;
  mix-blend-mode: screen;
  animation: glareSweepLoop 12s ease-in-out infinite !important;
  transform: none !important;
  opacity: 0.85 !important;
  border-radius: 0 !important;
}

/* ────────────────────────────────────────────
   Letter separator: soft glare behind giant letter
   ──────────────────────────────────────────── */
.letter-sep .sep-mega::before {
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 28%,
      rgba(255,143,200,0.32) 42%,
      rgba(255,255,255,0.55) 50%,
      rgba(109,228,225,0.32) 58%,
      transparent 72%,
      transparent 100%) !important;
  background-size: 260% 260% !important;
  background-position: 130% 130%;
  background-repeat: no-repeat;
  filter: blur(18px) !important;
  mix-blend-mode: screen !important;
  animation: glareSweepLoop 14s ease-in-out infinite !important;
  transform: none !important;
  border-radius: 0 !important;
  inset: -30% -25% !important;
  opacity: 0.85;
}

/* Empty-slot prismatic background — also softened to a glare */
.slot-empty .slot-empty-bg {
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 28%,
      rgba(255,143,200,0.30) 42%,
      rgba(255,255,255,0.50) 50%,
      rgba(109,228,225,0.30) 58%,
      transparent 72%,
      transparent 100%) !important;
  background-size: 260% 260% !important;
  background-position: 130% 130% !important;
  background-repeat: no-repeat !important;
  filter: blur(8px) !important;
  mix-blend-mode: screen !important;
  animation: glareSweepLoop 10s ease-in-out infinite !important;
  transform: none !important;
}

.slot-empty:hover .slot-empty-bg {
  animation-duration: 6s !important;
  filter: blur(6px) saturate(1.3) brightness(1.15) !important;
}

/* ============================================
   Vital Nutrition · Álbum · PATCHES 4
   SOLO portada:
   1) Quitar la sombra/mancha oscura en el medio
      (cover-inner::before / ::after eran un blob
      negro radial + una franja oscura)
   2) "EDICIÓN MUNDIAL · 2026" más grande y blanco
   ============================================ */

/* 1. Limpiar las manchas oscuras dentro de la card */
.cover-inner::before,
.cover-inner::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* 3. FONDO DE LA PORTADA mucho más oscuro alrededor de la card */
.album-cover {
  background:
    /* viñeta radial: aún más oscuro alrededor del centro */
    radial-gradient(ellipse 75% 80% at 50% 50%,
      rgba(0,0,0,0.5) 0%,
      rgba(0,0,0,0.82) 100%),
    /* overlay morado-noche denso */
    linear-gradient(180deg,
      rgba(12,3,28,0.88) 0%,
      rgba(58,15,80,0.78) 45%,
      rgba(15,5,32,0.90) 100%),
    /* foto del estadio (apenas se entrevé) */
    url("../img/album-cover-art.png") center 30% / cover no-repeat !important;
}

/* sombra externa adicional para que la card "flote" sobre el oscuro */
.cover-board {
  box-shadow:
    0 60px 110px -30px rgba(0,0,0,0.85),
    0 0 0 1px rgba(255,255,255,0.10),
    0 0 60px rgba(109,228,225,0.18),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

/* 2. Eyebrow legible y con presencia */
.cover-eyebrow {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.32em !important;
  color: #ffffff !important;
  margin-bottom: 16px !important;
  gap: 14px !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.45),
    0 0 16px rgba(109,228,225,0.55) !important;
}

.cover-eyebrow .line {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent) !important;
  width: 44px !important;
  height: 1.5px !important;
  border-radius: 1px;
}

/* ============================================
   Vital Nutrition · Álbum · PATCHES 5
   Sistema de códigos (VN-XXXX):
   - CodeRevealModal — al subir tarjeta(s)
   - DeleteCodeModal — para borrar con código
   ============================================ */

.code-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background:
    radial-gradient(ellipse at center, rgba(58,15,80,0.55), rgba(8,2,18,0.94));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 22px;
  animation: lbFade 0.22s ease;
}

.code-modal {
  position: relative;
  width: min(94vw, 480px);
  background:
    linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
  border-radius: 20px;
  padding: 30px 28px 26px;
  box-shadow:
    0 32px 72px -20px rgba(0,0,0,0.65),
    0 0 0 1px rgba(91,28,116,0.10),
    0 0 60px rgba(109,228,225,0.18);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: modalPop 0.32s cubic-bezier(.2,.8,.2,1);
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* foil border around the modal */
.code-modal::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background:
    linear-gradient(115deg,
      #ff61b0, #a684ff, #00d4cf, #84ffea, #ffe384, #ff61b0);
  background-size: 280% 280%;
  animation: foilShift 6s linear infinite;
  z-index: -1;
  filter: blur(0.5px);
  opacity: 0.85;
}

.code-modal.delete::before {
  background:
    linear-gradient(115deg, #ff8fc8, #c63a82, #69488e, #ff8fc8);
  background-size: 280% 280%;
}

.code-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(91,28,116,0.06);
  border: 1px solid rgba(91,28,116,0.18);
  color: var(--purple-deep);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.code-modal-close:hover {
  background: var(--purple-deep);
  color: #fff;
  transform: rotate(90deg);
}

.code-modal-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.code-modal-icon.delete {
  background: linear-gradient(135deg, #ff8fc8, #c63a82);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 8px 18px -6px rgba(198,58,130,0.55);
}
.code-modal-icon.delete svg {
  width: 30px;
  height: 30px;
  color: #fff;
  stroke: #fff;
}

.code-modal-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 6px;
  white-space: nowrap;
}
.code-modal-eyebrow.danger {
  color: #c63a82;
}

.code-modal-title {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--purple-deep);
}

.code-modal-title.delete-title {
  font-family: var(--display);
  font-size: 36px;
  color: var(--purple-deep);
}

.code-modal-warning {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--purple-deep);
  background: rgba(255,143,200,0.12);
  border: 1px solid rgba(255,143,200,0.45);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0 18px;
  text-align: left;
  width: 100%;
}
.code-modal-warning strong {
  color: #c63a82;
  font-weight: 800;
}

.code-modal-info {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--purple-deep);
  opacity: 0.85;
  margin: 10px 0 16px;
  max-width: 360px;
}

.code-modal-hint {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--teal);
  font-weight: 700;
  opacity: 0.85;
}

/* code list */
.code-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}

.code-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(0,183,179,0.10), rgba(91,28,116,0.04));
  border: 1px solid rgba(0,183,179,0.30);
  border-radius: 10px;
}

.code-item-slot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--display);
  color: var(--purple-deep);
  font-size: 16px;
  line-height: 1;
  min-width: 52px;
}
.code-item-letter {
  font-size: 18px;
  font-weight: 600;
}
.code-item-num {
  opacity: 0.7;
  font-size: 14px;
}

.code-item-code {
  flex: 1;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--purple-deep);
  letter-spacing: 0.1em;
  background: #fff;
  border: 1.5px dashed rgba(91,28,116,0.32);
  border-radius: 6px;
  padding: 7px 10px;
  text-align: center;
}

.code-copy-btn {
  padding: 7px 14px;
  background: linear-gradient(135deg, var(--turquoise), var(--teal));
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 10px -2px rgba(0,183,179,0.45);
}
.code-copy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -2px rgba(0,183,179,0.6);
}

/* CTA button */
.code-modal-cta {
  width: 100%;
  padding: 15px 22px;
  background: linear-gradient(135deg, var(--turquoise), var(--teal));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 10px 24px -8px rgba(0,183,179,0.6),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.code-modal-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px -8px rgba(0,183,179,0.75),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

/* code input (delete modal) */
.code-input {
  width: 100%;
  padding: 16px 18px;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  color: var(--purple-deep);
  background: #fff;
  border: 2px solid rgba(91,28,116,0.25);
  border-radius: 12px;
  margin-bottom: 12px;
}
.code-input::placeholder {
  color: rgba(91,28,116,0.25);
  font-weight: 600;
}
.code-input:focus {
  outline: none;
  border-color: var(--turquoise);
  box-shadow: 0 0 0 4px rgba(0,183,179,0.15);
}
.code-input.error {
  border-color: #c63a82;
  background: rgba(255,143,200,0.06);
}

.code-error {
  background: rgba(255,143,200,0.18);
  border: 1px solid #c63a82;
  color: #c63a82;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  width: 100%;
  text-align: center;
  line-height: 1.4;
}

.code-modal-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.btn-modal-secondary {
  flex: 1;
  padding: 13px 18px;
  background: rgba(91,28,116,0.06);
  color: var(--purple-deep);
  border: 1px solid rgba(91,28,116,0.22);
  border-radius: 10px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-modal-secondary:hover {
  background: rgba(91,28,116,0.12);
}

.btn-modal-primary.danger {
  flex: 1;
  padding: 13px 18px;
  background: linear-gradient(135deg, #ff8fc8, #c63a82);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(198,58,130,0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-modal-primary.danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -4px rgba(198,58,130,0.7);
}

/* responsive */
@media (max-width: 520px) {
  .code-modal { padding: 24px 20px; }
  .code-modal-title { font-size: 24px; }
  .code-modal-title.delete-title { font-size: 30px; }
  .code-item { flex-wrap: wrap; gap: 8px; }
  .code-item-code { font-size: 14px; }
}

/* ============================================
   Vital Nutrition · Álbum · PATCHES 6
   - Imagen de PACKS en cada separador de letra
   - Silueta perro+gato en contraportada interior
   ============================================ */

/* ───── Packs on each letter separator ───── */
.sep-packs {
  position: relative;
  z-index: 2;
  margin-top: 28px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sep-packs img {
  width: clamp(360px, 72%, 620px);
  height: auto;
  display: block;
  filter: none !important;
}

@media (max-width: 920px) {
  .sep-packs img { width: clamp(280px, 86%, 440px); }
  .sep-packs { margin-top: 20px; }
}

/* ───── Inside-back silhouette ───── */
.bi-pets {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0 6px;
  width: 100%;
}

.bi-silhouette {
  width: clamp(180px, 42%, 280px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0,183,179,0.28));
}

/* a touch more breathing room around the silhouette block */
.bi-content { gap: 18px; }
.bi-content .bi-tag { margin-top: 4px; }

/* ============================================
   Vital Nutrition · Álbum · PATCHES 7
   - Vote button on each filled card (big, on-brand)
   - TOP 15 ranking page (premium look)
   - Floating Top 15 jump button
   ============================================ */

/* ───────────────────────────────────────────
   VOTE BUTTON · large, on-brand, bottom-left
   FIX: ensure always visible on every filled card
   ─────────────────────────────────────────── */
.slot.filled .card-vote-btn,
.card .card-vote-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.card-vote-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--turquoise) 0%, var(--teal) 100%);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.55);
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow:
    0 6px 14px -3px rgba(0,183,179,0.7),
    0 2px 4px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.18s ease;
}

.card-vote-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35));
}

.card-vote-count {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: -0.01em;
  min-width: 14px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.card-vote-btn:hover {
  transform: translateY(-2px) scale(1.05);
  background: linear-gradient(135deg, #6de4e1 0%, var(--turquoise) 100%);
  box-shadow:
    0 10px 22px -4px rgba(0,183,179,0.9),
    0 3px 6px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

.card-vote-btn:active {
  transform: translateY(0) scale(0.96);
}

/* tiny pop animation on click — flash a heart-like burst */
@keyframes votePulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.card-vote-btn:active svg {
  animation: votePulse 0.32s ease;
}

/* Make sure the card-logo doesn't visually crowd the vote button */
.card-logo {
  bottom: 8px !important;
  right: 8px !important;
}

/* ───────────────────────────────────────────
   "IR A LA VOTACIÓN" — footer button (gold accent)
   ─────────────────────────────────────────── */
.btn-votar {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 14px 24px 14px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe27a 0%, #f2c84a 40%, #e6b855 70%, #d99f3a 100%);
  background-size: 200% 200%;
  border: 2px solid #ffffff;
  color: #2a0a3e;
  font-family: var(--sans);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 14px 30px -8px rgba(230,184,85,0.85),
    0 6px 14px -4px rgba(217,159,58,0.55),
    inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  animation: votarPulse 2.4s ease-in-out infinite;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}

.btn-votar svg {
  width: 20px;
  height: 20px;
  color: #2a0a3e;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.35));
}

.btn-votar:hover {
  transform: translateY(-2px) scale(1.04);
  animation-play-state: paused;
  box-shadow:
    0 20px 40px -8px rgba(230,184,85,1),
    0 10px 22px -4px rgba(217,159,58,0.75),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

@keyframes votarPulse {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow:
      0 14px 30px -8px rgba(230,184,85,0.85),
      0 6px 14px -4px rgba(217,159,58,0.55),
      inset 0 1px 0 rgba(255,255,255,0.7),
      0 0 0 0 rgba(242,200,74,0.6);
  }
  50% {
    background-position: 100% 50%;
    box-shadow:
      0 18px 38px -8px rgba(230,184,85,1),
      0 10px 22px -4px rgba(217,159,58,0.7),
      inset 0 1px 0 rgba(255,255,255,0.75),
      0 0 0 12px rgba(242,200,74,0);
  }
}

@media (max-width: 480px) {
  .btn-votar span { display: none; }
  .btn-votar {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
  }
}

/* ───────────────────────────────────────────
   TOP 15 PAGE
   ─────────────────────────────────────────── */
.page-top15 {
  padding: 0 !important;
  background: none !important;
}

.top15-page {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 540px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(109,228,225,0.12), transparent 60%),
    #ffffff;
  padding: 28px 28px 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.top15-page .prism-rays {
  inset: -10%;
  opacity: 0.35;
  filter: blur(2px);
}

.top15-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: 2;
  opacity: 0.85;
}
.top15-corner.tl { top: 16px; left: 16px; transform: rotate(-10deg); }
.top15-corner.br { bottom: 16px; right: 16px; transform: rotate(12deg); }

.top15-header {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-bottom: 16px;
}

.top15-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 6px;
}

.top15-eyebrow .line {
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
}

.top15-title {
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 60px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.005em;
  margin: 0;
}

.top15-subtitle {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(91,28,116,0.65);
  margin-top: 6px;
}

/* empty state */
.top15-empty {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(91,28,116,0.7);
  gap: 14px;
}
.top15-empty svg {
  width: 56px;
  height: 56px;
  color: var(--turquoise);
  opacity: 0.7;
}
.top15-empty p {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  max-width: 280px;
}

/* ranked list */
.top15-list {
  position: relative;
  z-index: 3;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  flex: 1;
}

.top15-item {
  display: grid;
  grid-template-columns: 44px 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 7px 12px 7px 8px;
  background: linear-gradient(135deg, rgba(0,183,179,0.06), rgba(91,28,116,0.04));
  border: 1px solid rgba(91,28,116,0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.top15-item:hover {
  transform: translateX(2px);
  background: linear-gradient(135deg, rgba(0,183,179,0.14), rgba(91,28,116,0.08));
  border-color: rgba(0,183,179,0.4);
  box-shadow: 0 4px 12px -4px rgba(91,28,116,0.18);
}

.top15-pos {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  text-align: center;
  color: var(--purple-deep);
  line-height: 1;
}

/* podium positions */
.top15-item.podium {
  background: linear-gradient(135deg, rgba(242,209,119,0.18), rgba(0,183,179,0.10));
  border-color: rgba(242,209,119,0.5);
}

.top15-item.podium-1 {
  background: linear-gradient(135deg, rgba(242,209,119,0.32), rgba(255,143,200,0.18));
  border-color: rgba(242,209,119,0.7);
  box-shadow: 0 6px 16px -6px rgba(242,209,119,0.5);
}

.top15-item.podium .top15-pos {
  font-size: 26px;
}

.top15-item.podium-1::before {
  content: "★";
  position: absolute;
  top: -8px;
  left: 14px;
  font-size: 14px;
  color: #d99f3a;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.top15-thumb {
  width: 44px;
  height: 66px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--purple-deep), var(--purple-night));
  position: relative;
  padding: 2px;
}

.top15-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(115deg,
    #ff61b0, #a684ff, #00d4cf, #84ffea, #ffe384, #ff61b0);
  background-size: 280% 280%;
  animation: foilShift 5s linear infinite;
  z-index: 0;
}

.top15-thumb img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--purple-night);
  border-radius: 4px;
  display: block;
}

.top15-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.top15-card-id {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--display);
  color: var(--purple-deep);
  line-height: 1;
}

.top15-letter {
  font-size: 22px;
  font-weight: 600;
}
.top15-num {
  font-size: 16px;
  opacity: 0.75;
}

.top15-card-name {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.top15-votes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: linear-gradient(135deg, var(--turquoise), var(--teal));
  color: #fff;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 17px;
  line-height: 1;
  box-shadow:
    0 4px 10px -3px rgba(0,183,179,0.55),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

.top15-votes svg {
  width: 14px;
  height: 14px;
}

.top15-item.podium-1 .top15-votes {
  background: linear-gradient(135deg, #f2d177, #d99f3a);
  box-shadow:
    0 4px 12px -3px rgba(217,159,58,0.55),
    inset 0 1px 0 rgba(255,255,255,0.35);
}
.top15-item.podium-2 .top15-votes,
.top15-item.podium-3 .top15-votes {
  background: linear-gradient(135deg, #b095f0, #69488e);
}

@media (max-width: 720px) {
  .lightbox-stage {
    width: min(90vw, 420px);
    gap: 16px;
  }

  .lightbox-actions {
    gap: 10px;
  }

  .btn-lightbox-vote,
  .btn-share-card {
    min-height: 44px;
    padding: 11px 16px 11px 14px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .btn-close {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    width: 52px;
    height: 52px;
    font-size: 28px;
  }

  .top15-item {
    grid-template-columns: 36px 38px 1fr auto;
    gap: 8px;
  }
  .top15-thumb { width: 38px; height: 56px; }
  .top15-pos { font-size: 18px; }
  .top15-letter { font-size: 18px; }
  .top15-votes { font-size: 14px; padding: 5px 10px; }
}

/* ============================================
   Vital Nutrition · Álbum · PATCHES 8
   - Páginas dinámicas por letra (separator add/remove)
   - MasterCodeModal styling
   ============================================ */

/* ───── Botones +/- en el separador ───── */
.sep-page-controls {
  position: relative;
  z-index: 3;
  display: inline-flex;
  gap: 10px;
  margin-top: 18px;
}

.sep-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--purple-deep);
  border: 1.5px solid rgba(91,28,116,0.22);
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  box-shadow: 0 2px 6px -2px rgba(91,28,116,0.18);
}

.sep-page-btn svg {
  width: 14px;
  height: 14px;
  color: currentColor;
}

.sep-page-btn.add {
  background: linear-gradient(135deg, var(--turquoise), var(--teal));
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(0,183,179,0.55);
}

.sep-page-btn.add:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -4px rgba(0,183,179,0.75);
}

.sep-page-btn.remove:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgba(255,143,200,0.10);
  border-color: rgba(198,58,130,0.55);
  color: #c63a82;
}

.sep-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.sep-page-controls-hint {
  position: relative;
  z-index: 3;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(91,28,116,0.5);
}

/* ───── Master-code modal variant ───── */
.code-modal.master::before {
  background:
    linear-gradient(115deg, #ffe27a, #00b7b3, #69488e, #ffe27a) !important;
  background-size: 280% 280% !important;
}

.code-modal-icon.master {
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 8px 18px -6px rgba(91,28,116,0.4);
}
.code-modal-icon.master.add {
  background: linear-gradient(135deg, var(--turquoise), var(--teal));
}
.code-modal-icon.master.remove {
  background: linear-gradient(135deg, #ff8fc8, #c63a82);
}
.code-modal-icon.master svg {
  width: 30px;
  height: 30px;
  color: #fff;
  stroke: #fff;
}

.code-modal-eyebrow.master {
  color: var(--purple-deep);
}

.btn-modal-primary.add {
  flex: 1;
  padding: 13px 18px;
  background: linear-gradient(135deg, var(--turquoise), var(--teal));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(0,183,179,0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-modal-primary.add:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -4px rgba(0,183,179,0.7);
}

/* ============================================
   Vital Nutrition · Álbum · PATCHES 9
   Mover +/- página a una BARRA DISCRETA
   en el pie de cada página de contenido
   ============================================ */

/* Ocultar (legacy) los controles del separador */
.sep-page-controls,
.sep-page-controls-hint { display: none !important; }

/* Asegurar que la columna de página tenga espacio para el pie */
.page.page-left,
.page.page-right {
  display: flex !important;
  flex-direction: column !important;
}

/* la grilla ocupa el espacio principal, el pie va abajo */
.page > .grid {
  flex: 0 0 auto;
}

/* ───── Page foot bar ───── */
.page-foot {
  margin-top: auto;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px dashed rgba(91,28,116,0.16);
  position: relative;
  z-index: 2;
}

.page-foot-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(91,28,116,0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.page-foot-label strong {
  color: var(--purple-deep);
  font-weight: 800;
  font-family: var(--display);
  font-size: 13px;
  margin-left: 4px;
}

.page-foot-controls {
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}

.page-foot-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--purple-deep);
  border: 1px solid rgba(91,28,116,0.22);
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.page-foot-btn svg {
  width: 11px;
  height: 11px;
}

.page-foot-btn.add {
  background: linear-gradient(135deg, var(--turquoise), var(--teal));
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  box-shadow: 0 3px 8px -2px rgba(0,183,179,0.45);
}

.page-foot-btn.add:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -3px rgba(0,183,179,0.65);
}

.page-foot-btn.remove:hover:not(:disabled) {
  background: rgba(255,143,200,0.10);
  border-color: rgba(198,58,130,0.55);
  color: #c63a82;
}

.page-foot-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.page-foot-hint {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0.78;
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .page-foot-hint { display: none; }
  .page-foot-label { font-size: 9px; }
  .page-foot-btn span { display: none; }
  .page-foot-btn {
    padding: 6px;
    width: 28px;
    height: 28px;
    justify-content: center;
  }
}

/* ============================================
   Vital Nutrition · Álbum · PATCHES 10
   Voto único por navegador
   ============================================ */

/* estado "votado" del botón */
.card-vote-btn.voted {
  background: linear-gradient(135deg, #69488e 0%, #5b1c74 100%) !important;
  border-color: rgba(255,255,255,0.6) !important;
  color: #fff;
  cursor: default;
  box-shadow:
    0 4px 10px -3px rgba(91,28,116,0.55),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
  animation: none;
}

.card-vote-btn.voted::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--turquoise);
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
}

.card-vote-btn.voted:hover {
  transform: none;
  box-shadow:
    0 4px 10px -3px rgba(91,28,116,0.55),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

.card-vote-btn.voted:active svg {
  animation: none;
}

.card-vote-label {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6de4e1;
  margin-left: 2px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

.card-vote-btn[disabled] {
  cursor: default;
  opacity: 1; /* keep it readable even when disabled */
}