/* CLUBE18 Galeria - frontend original preservado */
[data-g18-flow],
  .g18-root[data-g18-gallery] {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  [data-g18-flow] {
    box-sizing: border-box;
    min-height: var(--g18-flow-height, auto) !important;
  }

  .g18-root {
    display: block;
    --g18-bg: #121212;
    --g18-oxblood: #4A0E18;
    --g18-accent: #8B1E2D;
    --g18-text: #E8D3B8;
    --g18-panel: #24181B;
    --g18-line: #433836;
    --g18-line-strong: #806A61;
    --g18-muted: #ffffff;
    --g18-pad: 14px;
    --g18-sticky-top: 0px;
    container: acervo18 / inline-size;
    isolation: isolate;
    background: var(--g18-bg);
    color: var(--g18-text);
    color-scheme: dark;
    font: 400 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: left;
  }

  .g18-root *, .g18-root *::before, .g18-root *::after { box-sizing: border-box; }
  .g18-root [hidden] { display: none !important; }
  .g18-root :where(h2, h3, p, ul, figure) { margin: 0; }
  .g18-root :where(button, a):focus-visible,
  .g18-root .g18-focus:focus-visible {
    outline: 2px solid var(--g18-text);
    outline-offset: 4px;
  }

  .g18-root button {
    appearance: none;
    color: inherit;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
  }

  .g18-root .g18-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .g18-root .g18-shell {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--g18-pad);
  }

  .g18-root .g18-header { border-bottom: 1px solid var(--g18-line); }

  .g18-root .g18-header-inner,
  .g18-root .g18-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 58px;
  }

  .g18-root .g18-brand { min-width: 0; }

  .g18-root .g18-brand-logo {
    display: block;
    width: 132px;
    width: clamp(96px, 34cqi, 132px);
    max-width: 100%;
    height: auto;
  }

  .g18-root .g18-brand-text {
    display: block;
    max-width: min(65cqi, 420px);
    font-size: clamp(17px, 3.2cqi, 24px);
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: -.035em;
    color: var(--g18-text);
    overflow-wrap: anywhere;
  }

  .g18-root .g18-age-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid var(--g18-line);
    border-radius: 999px;
    color: var(--g18-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .09em;
    white-space: nowrap;
  }

  .g18-root .g18-age-label strong { color: var(--g18-text); font-size: 12px; }

  .g18-root:has(> .g18-shell > [data-g18-entry]:not([hidden])) {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .g18-root > .g18-shell:has(> [data-g18-entry]:not([hidden])) {
    display: grid;
    align-items: center;
    width: 100%;
  }

  .g18-root .g18-entry {
    --g18-entry-pad: clamp(20px, 4cqi, 36px);
    width: min(100%, 560px);
    margin: clamp(18px, 4cqi, 48px) auto;
    padding: var(--g18-entry-pad);
    border: 1px solid var(--g18-line);
    border-radius: 18px;
    background: radial-gradient(ellipse at top, var(--g18-oxblood), var(--g18-panel) 70%);
    box-shadow: 0 14px 40px #0003;
    text-align: center;
  }

  .g18-root .g18-age-stamp {
    display: grid;
    place-items: center;
    width: 54px;
    height: 48px;
    margin: 0 auto 12px;
    border: 1px solid var(--g18-accent);
    border-radius: 12px;
    background: var(--g18-oxblood);
    color: var(--g18-text);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.04em;
  }

  .g18-root .g18-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--g18-text);
    font-size: 11px;
    font-weight: 770;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  .g18-root .g18-kicker::before {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
    content: "";
  }

  .g18-root .g18-display {
    margin-block: 4px 0;
    color: var(--g18-text);
    font-size: clamp(29px, 5cqi, 46px);
    line-height: 1.07;
    font-weight: 740;
    letter-spacing: -.05em;
    text-wrap: balance;
  }

  .g18-root .g18-entry .g18-display {
    max-width: 17ch;
    margin: 6px auto 0;
  }

  .g18-root .g18-summary {
    max-width: 36ch;
    margin: 10px auto 0;
    color: var(--g18-muted);
    font-size: 14px;
    line-height: 1.55;
  }

  .g18-root .g18-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
  }

  .g18-root .g18-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--g18-accent);
    color: var(--g18-text);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.3;
    text-align: center;
    transition: background-color .18s, color .18s, border-color .18s;
  }

  .g18-root .g18-btn-secondary {
    background: transparent;
    border-color: var(--g18-line-strong);
    color: var(--g18-text);
  }

  .g18-root .g18-entry-note {
    margin-top: 14px;
    color: var(--g18-muted);
    font-size: 13px;
  }

  .g18-root .g18-entry-art {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: 170px;
    margin: var(--g18-entry-pad) calc(-1 * var(--g18-entry-pad)) calc(-1 * var(--g18-entry-pad));
    overflow: hidden;
    border-top: 1px solid var(--g18-line);
    border-radius: 0 0 17px 17px;
    background: linear-gradient(135deg, var(--g18-oxblood), var(--g18-accent));
    color: var(--g18-text);
  }

  .g18-root .g18-entry-lines {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .32;
  }

  .g18-root .g18-entry-number {
    font-size: clamp(66px, 24cqi, 108px);
    line-height: 1;
    font-weight: 810;
    letter-spacing: -.095em;
    transform: translateX(-.04em);
  }

  .g18-root .g18-entry-number sup {
    position: static;
    margin-left: .04em;
    font-size: .52em;
    line-height: 0;
    vertical-align: .55em;
  }

  .g18-root .g18-art-label {
    position: absolute;
    right: 15px;
    bottom: 12px;
    font: 700 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .095em;
  }

  .g18-root .g18-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    overflow: hidden;
    margin-block: 24px 12px;
    border: 1px solid var(--g18-line);
    border-radius: 20px;
    background: var(--g18-bg);
  }

  .g18-root .g18-hero-copy {
    position: relative;
    z-index: 1;
    padding: 28px 22px 30px;
  }

  .g18-root .g18-hero .g18-display {
    margin-block: 10px 0;
    color: var(--g18-text);
    font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(42px, 11cqi, 62px);
    font-weight: 500;
    line-height: .95;
    letter-spacing: -.038em;
  }

  .g18-root .g18-hero .g18-display em {
    color: var(--g18-text);
    font-style: italic;
  }

  .g18-root .g18-hero .g18-actions {
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 24px;
  }

  .g18-root .g18-hero-buttons {
    display: inline-flex;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
  }

  .g18-root .g18-hero-buttons > .g18-btn {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .g18-root .g18-hero-buttons [data-g18-install] { background: var(--g18-panel); }

  .g18-root .g18-hero-art {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at right, var(--g18-oxblood), var(--g18-bg) 75%);
  }

  .g18-root .g18-hero-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 56% 40%;
    opacity: .95;
    filter: blur(2.5px);
    transform: scale(1.10);
  }

  .g18-root .g18-hero-art::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
      linear-gradient(0deg, #1C1A1C99, transparent 38%),
      linear-gradient(90deg, #1C1A1CF5 0%, #1C1A1CDC 36%, #1C1A1C77 75%, #1C1A1C30 100%);
    pointer-events: none;
    content: "";
  }

  .g18-root .g18-hero-stamp { display: none; }

  .g18-root .g18-totals {
    padding-bottom: 2px;
    color: var(--g18-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }

  .g18-root .g18-collection {
    padding-bottom: 36px;
    scroll-margin-block-start: var(--g18-sticky-top);
  }

  .g18-root .g18-tools {
    position: sticky;
    top: var(--g18-sticky-top);
    z-index: 3;
    padding-block: 8px 10px;
    border-bottom: 1px solid var(--g18-line);
    background: var(--g18-bg);
  }

  .g18-root[data-g18-gallery][data-g18-scroll-area] {
    max-height: var(--g18-scroll-height) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--g18-accent) var(--g18-panel);
  }

  html:has(.g18-root[data-g18-gallery]),
  .g18-root[data-g18-gallery][data-g18-scroll-area] {
    scrollbar-gutter: stable;
  }

  .g18-root[data-g18-scroll-area] .g18-tools { top: 0; }

  .g18-root .g18-filters {
    display: flex;
    width: 100%;
    gap: 6px;
  }

  .g18-root .g18-filter {
    display: inline-flex;
    flex: 1 1 0;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2px 5px;
    min-width: 0;
    min-height: 44px;
    padding: 5px 8px;
    border: 1px solid var(--g18-line);
    border-radius: 999px;
    background: var(--g18-panel);
    color: var(--g18-muted);
    font-size: 12px;
    font-weight: 680;
    line-height: 1.2;
    white-space: normal;
    transition: color .18s, background-color .18s, border-color .18s;
  }

  .g18-root .g18-filter[aria-pressed="true"] {
    border-color: var(--g18-accent);
    background: var(--g18-accent);
    color: var(--g18-text);
  }

  .g18-root .g18-filter-count {
    flex: none;
    min-width: 20px;
    padding: 1px 4px;
    border-radius: 999px;
    background: #E8D3B812;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .g18-root .g18-filter[aria-pressed="true"] .g18-filter-count {
    background: var(--g18-oxblood);
  }

  .g18-root .g18-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .g18-root .g18-grid {
    display: grid;
    overflow-anchor: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-block-start: 10px;
    padding: 0;
    list-style: none;
  }

  .g18-root .g18-card {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--g18-line);
    border-radius: 12px;
    background: var(--g18-panel);
    text-align: left;
    transition: border-color .18s, background-color .18s;
  }

  .g18-root .g18-cover {
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: radial-gradient(ellipse at 65% 20%, var(--g18-oxblood), var(--g18-bg) 74%);
  }

  .g18-root .g18-cover :is(img, video) {
    position: absolute;
    z-index: -1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
  }

  .g18-root [data-tipo="video"] .g18-cover { background: var(--g18-bg); }
  .g18-root [data-tipo="video"] .g18-cover :is(img, video) { object-fit: contain; }

  .g18-root .g18-cover :is(img, video):not([data-g18-loaded]) { opacity: 0; }
  .g18-root .g18-cover video { pointer-events: none; }
  .g18-root .g18-cover video[data-g18-loaded] + img { visibility: hidden; }

  .g18-root .g18-cover-fallback {
    position: absolute;
    z-index: -2;
    width: 32px;
    height: 32px;
    color: var(--g18-muted);
  }

  .g18-root .g18-cover-fallback .g18-icon { width: 100%; height: 100%; }

  .g18-root .g18-duration {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 6px;
    border: 1px solid #E8D3B838;
    border-radius: 6px;
    background: #1C1A1CE8;
    color: var(--g18-text);
    font-size: 10px;
    font-weight: 720;
    font-variant-numeric: tabular-nums;
  }

  .g18-root .g18-play {
    display: grid;
    place-items: center;
    width: clamp(40px, 5cqi, 50px);
    aspect-ratio: 1;
    border: 1px solid #E8D3B875;
    border-radius: 50%;
    background: #1C1A1CCF;
    color: var(--g18-text);
    transition: background-color .18s, color .18s, border-color .18s;
  }

  .g18-root .g18-play .g18-icon {
    width: 19px;
    height: 19px;
    fill: currentColor;
    transform: translateX(1px);
  }

  .g18-root .g18-card-caption {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    align-items: flex-end;
    min-height: 38px;
    padding: 14px 9px 8px;
    background: linear-gradient(transparent, #1C1A1CF0);
    pointer-events: none;
  }

  .g18-root .g18-card-name {
    overflow: hidden;
    color: var(--g18-text);
    font-size: clamp(11px, 1.4cqi, 13px);
    font-weight: 650;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .g18-root .g18-empty {
    margin-block-start: 12px;
    padding: 28px 16px;
    border: 1px dashed var(--g18-line-strong);
    border-radius: 14px;
    color: var(--g18-muted);
    text-align: center;
  }

  .g18-root .g18-footer { border-top: 1px solid var(--g18-line); }

  .g18-root .g18-footer-inner {
    min-height: 56px;
    color: var(--g18-muted);
    font-size: 12px;
  }

  .g18-root .g18-exit {
    min-height: 44px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--g18-muted);
    font-size: 12px;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: .24em;
  }

  .g18-root .g18-dialog,
  .g18-root .g18-install-help {
    position: fixed;
    inset: 0;
    width: min(96vw, 1260px);
    max-width: none;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--g18-line);
    border-radius: 14px;
    background: var(--g18-bg);
    color: var(--g18-text);
    box-shadow: 0 20px 90px #0008;
  }

  .g18-root .g18-install-help {
    width: min(calc(100% - 28px), 420px);
    padding: 22px;
    background: var(--g18-panel);
  }

  .g18-root .g18-install-help::backdrop { background: #1C1A1CDC; }

  .g18-root .g18-install-help h2 {
    margin: 4px 0 8px;
    font-size: 23px;
    line-height: 1.18;
    letter-spacing: -.03em;
  }

  .g18-root .g18-install-help p:not(.g18-kicker) {
    color: var(--g18-muted);
    font-size: 14px;
  }

  .g18-root .g18-install-steps {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--g18-line);
  }

  .g18-root .g18-install-steps h3 { margin-bottom: 4px; font-size: 14px; }
  .g18-root .g18-install-help .g18-btn { width: 100%; margin-top: 18px; }

  .g18-root .g18-dialog::backdrop { background: #1C1A1CF5; }
  .g18-root .g18-dialog-panel { display: flex; flex-direction: column; }

  .g18-root .g18-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
  }

  .g18-root .g18-dialog-label { min-width: 0; }

  .g18-root .g18-dialog-head .g18-kicker { font-size: 9px; }

  .g18-root .g18-dialog-title {
    color: var(--g18-text);
    font-size: clamp(16px, 2.8vw, 21px);
    font-weight: 720;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .g18-root .g18-icon-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
    border: 1px solid var(--g18-line-strong);
    border-radius: 10px;
    background: var(--g18-panel);
    color: var(--g18-text);
  }

  .g18-root .g18-icon-btn:disabled { visibility: hidden; }

  .g18-root .g18-dialog-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--g18-line);
  }

  .g18-root .g18-dialog-controls .g18-icon-btn {
    gap: 7px;
    padding-inline: 10px;
    font-size: 13px;
    font-weight: 680;
    white-space: nowrap;
  }

  .g18-root [data-g18-prev] { justify-self: start; }
  .g18-root [data-g18-next] { justify-self: end; }

  .g18-root .g18-stage {
    position: relative;
    display: grid;
    place-items: center;
    height: min(78vh, calc(100vh - 145px), 830px);
    height: min(78dvh, calc(100dvh - 145px), 830px);
    min-height: 150px;
    border-top: 1px solid var(--g18-line);
    background: var(--g18-bg);
  }

  .g18-root .g18-visual { position: absolute; inset: 0; }

  .g18-root .g18-visual :is(img, video) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .g18-root .g18-visual img { touch-action: pan-y pinch-zoom; }

  .g18-root .g18-media-state {
    z-index: 1;
    margin: 12px;
    padding: 8px 12px;
    border-radius: 7px;
    background: var(--g18-panel);
    color: var(--g18-muted);
    font-size: 14px;
    text-align: center;
    pointer-events: none;
  }

  .g18-root .g18-position {
    color: var(--g18-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  @container acervo18 (min-width: 550px) {
    .g18-root .g18-shell { --g18-pad: 24px; }
    .g18-root .g18-hero-copy { padding: 32px; }
    .g18-root .g18-filters { width: fit-content; }
    .g18-root .g18-filter { min-width: 99px; padding-inline: 14px; }
    .g18-root .g18-grid { gap: 12px; }
  }

  @container acervo18 (min-width: 700px) {
    .g18-root .g18-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @container acervo18 (min-width: 790px) {
    .g18-root .g18-hero { min-height: 326px; align-items: center; margin-top: 30px; }
    .g18-root .g18-hero-copy { padding: 32px 42px; }
    .g18-root .g18-hero .g18-display { font-size: clamp(60px, 6.5cqi, 92px); }
    .g18-root .g18-hero-art::after {
      background:
        linear-gradient(0deg, #1C1A1C99, transparent 38%),
        linear-gradient(90deg, #1C1A1CF5 0%, #1C1A1CE0 24%, #1C1A1C8C 52%, #1C1A1C30 79%, #1C1A1C12 100%);
    }
    .g18-root .g18-hero-stamp {
      display: block;
      position: absolute;
      right: 20px;
      bottom: 16px;
      color: var(--g18-text);
      font: 650 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
      letter-spacing: .12em;
    }
  }

  @container acervo18 (min-width: 1100px) {
    .g18-root .g18-shell { --g18-pad: 36px; }
    .g18-root .g18-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  }

  @container acervo18 (max-width: 440px) {
    .g18-root .g18-entry .g18-actions > .g18-btn { width: 100%; }
    .g18-root .g18-hero-buttons > .g18-btn {
      gap: 6px;
      padding-inline: 10px;
      font-size: 13px;
    }
    .g18-root .g18-hero-buttons .g18-icon { width: 16px; height: 16px; }
  }

  @container acervo18 (max-width: 300px) {
    .g18-root .g18-grid { grid-template-columns: minmax(0, 1fr); }
    .g18-root .g18-filter { gap: 3px; padding-inline: 5px; }
  }

  @media (max-width: 600px) {
    .g18-root .g18-dialog {
      width: 100%;
      height: 100%;
      height: 100dvh;
      max-height: none;
      border: 0;
      border-radius: 0;
    }
    .g18-root .g18-dialog-panel { height: 100%; }
    .g18-root .g18-dialog-head { padding-top: max(7px, env(safe-area-inset-top)); }
    .g18-root .g18-stage { flex: 1; min-height: 0; height: auto; }
    .g18-root .g18-dialog-controls { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  }

  @media (max-width: 360px) {
    .g18-root .g18-dialog-controls { padding-inline: 8px; }
    .g18-root .g18-dialog-controls .g18-icon-btn { gap: 5px; padding-inline: 7px; font-size: 12px; }
    .g18-root .g18-dialog-controls .g18-icon { width: 16px; height: 16px; }
  }

  @media (hover: hover) {
    .g18-root .g18-btn:hover { background: var(--g18-oxblood); border-color: var(--g18-accent); color: var(--g18-text); }
    .g18-root .g18-btn-secondary:hover { background: var(--g18-oxblood); border-color: var(--g18-accent); color: var(--g18-text); }
    .g18-root .g18-filter[aria-pressed="false"]:hover { background: var(--g18-oxblood); border-color: var(--g18-accent); color: var(--g18-text); }
    .g18-root .g18-card:hover { border-color: var(--g18-accent); background: var(--g18-oxblood); }
    .g18-root [data-tipo="foto"] .g18-card:hover img { transform: scale(1.04); }
    .g18-root .g18-card:hover .g18-play { background: var(--g18-accent); color: var(--g18-text); border-color: var(--g18-accent); }
    .g18-root .g18-icon-btn:enabled:hover { background: var(--g18-oxblood); border-color: var(--g18-accent); }
    .g18-root .g18-exit:hover { color: var(--g18-text); }
  }

  @media (prefers-reduced-motion: reduce) {
    .g18-root *, .g18-root *::before, .g18-root *::after { transition: none !important; }
    .g18-root [data-tipo="foto"] .g18-card:hover img { transform: none; }
  }