h1, h2, .card-info h3, .product-body h3, .creator h3 {
  font-weight: 700;
  font-style: normal;
}

:root {
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 48px;
}

.app-main { padding-top: 18px; }
.app-main .profiles { padding-top: 24px; }
.profiles > .section-head h2 { font-size:clamp(40px,4.2vw,60px); line-height:1; letter-spacing:-.04em; }
.brand { display:flex; align-items:center; gap:10px; padding:0; background:transparent; }
.logo-sexo { fill:#171213; transition:fill .35s; }
.brand-logo { display:block; width:190px; height:44px; object-fit:contain; object-position:left center; transition:transform .25s,filter .25s; }
.brand:hover .brand-logo { transform:translateY(-1px) rotate(-.4deg); filter:drop-shadow(0 7px 10px #CE174F24); }
.heart-core { transform-box:fill-box; transform-origin:center; }
.heart-burst circle { fill:#CE174F; opacity:0; transform-box:fill-box; transform-origin:center; }
.brand:hover .heart-core { animation:heart-pop .62s cubic-bezier(.2,.9,.25,1.35); }
.brand:hover .heart-burst circle { animation:heart-particle .58s ease-out both; }
.brand:hover .heart-burst .p2,.brand:hover .heart-burst .p5 { animation-delay:.035s; }
.brand:hover .heart-burst .p3,.brand:hover .heart-burst .p6 { animation-delay:.07s; }
@keyframes heart-pop { 0%{transform:scale(1)} 22%{transform:scale(.72)} 52%{transform:scale(1.34)} 72%{transform:scale(.94)} 100%{transform:scale(1)} }
@keyframes heart-particle { 0%{opacity:0;transform:scale(.2)} 35%{opacity:1;transform:scale(1.3)} 100%{opacity:0;transform:scale(.55)} }
@media (prefers-reduced-motion:reduce){.brand:hover .heart-core,.brand:hover .heart-burst circle{animation:none}.brand:hover .heart-core{transform:scale(1.08)}}
.logo-mark { position:relative; display:block; width:38px; height:38px; border-radius:13px; background:var(--red); color:#fff; transform:rotate(-5deg); box-shadow:0 8px 22px #CE174F38; }
.logo-mark i { position:absolute; font:800 21px/1 "Baloo 2",sans-serif; font-style:normal; }
.logo-mark i:first-child { left:7px; top:5px; }
.logo-mark i:last-child { right:6px; bottom:3px; opacity:.72; }
.logo-word { font:700 19px/1 "Baloo 2",sans-serif; letter-spacing:-.04em; }
.logo-word b { color:var(--red); font-weight:800; }
.app-welcome { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; margin-bottom:18px; border:1px solid var(--line); border-radius:var(--radius-md); font-size:12px; }
.app-welcome button { border:0; border-radius:999px; padding:9px 13px; background:color-mix(in srgb,var(--ink) 8%,transparent); color:var(--ink); }
.status-pulse { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:#48c56b; box-shadow:0 0 0 5px #48c56b20; }
.story-strip { display:flex; gap:16px; overflow:auto; padding:4px 2px 22px; scrollbar-width:none; }
.story-strip button { display:flex; flex-direction:column; align-items:center; gap:6px; border:0; background:transparent; color:var(--ink); min-width:66px; }
.story-avatar { width:58px; height:58px; border-radius:50%; background:linear-gradient(145deg,var(--c1),var(--c2)); border:3px solid var(--cream); outline:2px solid var(--red); }
.story-strip b { font-size:10px; }
.messages-preview { padding-top:80px; }
.inbox-demo { display:grid; grid-template-columns:320px 1fr; min-height:360px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); }
.inbox-list { padding:10px; border-right:1px solid var(--line); }
.inbox-list button { width:100%; display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:12px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--ink); text-align:left; }
.inbox-list button.active { background:color-mix(in srgb,var(--red) 12%,transparent); }
.inbox-list small { display:block; color:var(--muted); margin-top:2px; }
.inbox-list i { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--red); color:#fff; font-style:normal; font-size:9px; }
.chat-empty { display:grid; place-content:center; justify-items:center; padding:30px; text-align:center; }
.chat-empty > span { display:grid; place-items:center; width:64px; height:64px; border-radius:22px; background:color-mix(in srgb,var(--red) 13%,transparent); color:var(--red); font-size:24px; }
.chat-empty h3 { font:700 24px "Baloo 2",sans-serif; margin:18px 0 5px; }
.chat-empty p { max-width:420px; color:var(--muted); font-size:12px; }

.topbar {
  margin: 10px 1.2vw 0;
  padding-inline: 2.8vw;
  border: 1px solid var(--line);
  border-radius: 22px;
}

.hero { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.hero::before { border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
.hero-art { border-radius: var(--radius-xl) 0 0 var(--radius-xl); overflow: hidden; }
.filterbar { border-radius: var(--radius-md); padding-inline: 12px; }
.search { border-radius: var(--radius-sm); }
.search input { border-radius: var(--radius-sm); }
.badge { border-radius: 999px; }
.card-info { padding-inline: 10px; }
.content-market { margin: 0 1.2vw; border-radius: var(--radius-xl); }
.creators { margin: 14px 1.2vw; border-radius: var(--radius-xl); }
.join { margin: 14px 1.2vw; border-radius: var(--radius-xl); }
.gate-card { border-radius: var(--radius-lg); }
.drawer { margin: 10px; height: calc(100% - 20px); border-radius: var(--radius-lg); }
.city-list button { padding-inline: 12px; border-radius: var(--radius-sm); }
.bag-line { border-radius: var(--radius-sm); padding-inline: 10px; }
.play, .gate-mark, .online { border-radius: 999px; }
.checkout { border-radius: 999px; }

.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
  color: #f5b0a9;
  font-size: 12px;
  font-weight: 800;
}

.product {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #ffffff12;
}

.product-art { overflow: hidden; }
.product-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #171211aa, transparent 65%);
  backdrop-filter: blur(2px);
}

.locked {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  left: calc(50% - 29px);
  top: calc(50% - 29px);
  border-radius: 50%;
  background: #ffffffea;
  color: #171211;
  font-size: 20px;
  box-shadow: 0 12px 35px #0007;
}

.preview-stack {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 16px;
  display: flex;
  gap: 6px;
}

.preview-stack i {
  width: 34px;
  height: 42px;
  border-radius: 8px;
  background: #ffffff30;
  border: 1px solid #ffffff40;
}

.buy-row b small { font-size: 10px; color: #999; }
.buy-row button {
  width: auto;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  background: var(--red);
  border-color: var(--red);
}

.button, .login, .filter-btn, .tabs button { border-radius: 999px; }
.portrait { border-radius: 24px; }
.avatar { box-shadow: 0 8px 30px #51241b1c; }

.subscriber-head { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.subscriber-head h2 { font-size:36px; margin:3px 0 0; }
.subscriber-head p { margin:0; color:var(--muted); font-size:11px; }
.subscriber-avatar { display:grid; place-items:center; flex:0 0 64px; height:64px; border-radius:50%; background:var(--red); color:#fff; font:700 22px "Baloo 2",sans-serif; }
.subscriber-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:22px; }
.subscriber-stats div { padding:13px 8px; text-align:center; border:1px solid var(--line); border-radius:var(--radius-sm); }
.subscriber-stats b,.subscriber-stats span { display:block; }
.subscriber-stats b { font-size:20px; }
.subscriber-stats span { color:var(--muted); font-size:9px; }
.profile-menu { display:flex; flex-direction:column; margin-bottom:28px; }
.profile-menu button { display:flex; justify-content:space-between; padding:15px 4px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; }
.profile-menu button span { color:var(--red); }
.membership-title { display:block; margin-bottom:8px; }
.membership-line { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.membership-line small { display:block; color:var(--muted); font-size:9px; margin-top:2px; }
.membership-line > button { border:0; background:transparent; color:var(--ink); }
.member-mini { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:linear-gradient(145deg,#e57368,#5f2633); color:#fff; font-weight:800; }
.signout { width:100%; margin-top:20px; padding:13px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); }
.bag b { font-size:8px; background:#aaa; }
.bag b.has-access { background:#4dcc76; }

.city-gate-card { width: min(760px, 100%); padding: 42px 52px; background:#171213; color:#fff; }
.city-gate-card h2 { margin-block: 18px 12px; font-size:clamp(22px,2.5vw,30px); line-height:1; white-space:nowrap; color:#fff; letter-spacing:.08em; }
.city-gate-card .gate-city-grid button { color:#fff; }
.gate-logo { display:flex; justify-content:center; }
.gate-brand { width:max-content; cursor:default; transform:none !important; }
.gate-brand .brand-logo { width:300px; height:76px; }
.gate-city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 24px; }
.gate-city-grid button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  justify-content:center;
  font-size:17px;
  font-weight:700;
}
.gate-city-grid button:hover { background: var(--red); color: #fff; border-color: var(--red); }
.view-profile { position: absolute; z-index: 3; left: 16px; bottom: 16px; padding: 9px 14px; border-radius: 999px; background: #fff; color: #171211; font-size: 11px; font-weight: 800; transform: translateY(8px); opacity: 0; transition: .25s; }
.profile-card { cursor: pointer; border-radius: 24px; outline: none; }
.profile-card:hover .view-profile, .profile-card:focus .view-profile { transform: none; opacity: 1; }

.profile-view { position: fixed; inset: 0; z-index: 80; background: var(--cream); overflow-y: auto; transform: translateY(105%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.profile-view.open { transform: none; }
.profile-shell { width: min(1280px, 100%); margin: auto; padding: 34px 4vw 100px; }
.profile-back { position: sticky; top: 18px; z-index: 4; padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); color: var(--ink); }
.profile-layout { display: grid; grid-template-columns: minmax(330px, 42%) 1fr; gap: 48px; margin-top: 28px; align-items: start; }
.profile-visuals { position: sticky; top: 82px; }
.profile-cover { height: 610px; position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--tone); }
.profile-cover::before { content:""; position:absolute; width:72%; height:88%; left:14%; bottom:-10%; border-radius:48% 48% 12% 12%; background:linear-gradient(160deg,rgba(255,255,255,.65),var(--shade)); }
.profile-cover::after { content:""; position:absolute; width:38%; height:35%; left:31%; top:14%; border-radius:50%; background:linear-gradient(145deg,#f4c3aa,#8e4d3d); }
.profile-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:9px; }
.profile-thumbs i { height:92px; display:grid; place-items:center; border-radius:var(--radius-sm); background:linear-gradient(145deg,#d4a49b,#5f2834); font-style:normal; }
.locked-thumb { filter:saturate(.5); }
.profile-heading { display:flex; align-items:start; justify-content:space-between; gap:18px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.profile-heading h1 { font-size:clamp(56px,7vw,92px); margin-top:8px; }
.profile-heading p { color:var(--muted); margin:4px 0 0; }
.availability { color:#43aa64; font-size:10px; letter-spacing:.12em; font-weight:800; }
.profile-actions { display:flex; gap:7px; }
.profile-actions button { padding:9px 12px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); }
.quick-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:24px 0; }
.quick-facts div { padding:16px; border:1px solid var(--line); border-radius:var(--radius-sm); }
.quick-facts small { display:block; color:var(--muted); font-size:8px; letter-spacing:.12em; }
.quick-facts b { display:block; margin-top:5px; font-size:13px; }
.about-block { padding:32px 0; }
.about-block p { max-width:680px; color:var(--muted); line-height:1.8; }
.public-contact { padding:24px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; border:1px solid var(--line); border-radius:var(--radius-md); }
.public-contact h2 { font-size:38px; margin-top:7px; }
.public-contact p { color:var(--muted); font-size:12px; margin-bottom:0; }
.contact-actions { display:flex; gap:8px; flex-direction:column; min-width:170px; }
.whatsapp { background:#25d366; border-color:#25d366; color:#06150b; }
.call { color:var(--ink); }
.public-services { padding:28px 0; }
.public-services > div { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.public-services > div span { padding:9px 13px; border-radius:999px; background:color-mix(in srgb,var(--ink) 7%,transparent); font-size:11px; }
.access-card { display:grid; grid-template-columns:1fr 180px; align-items:center; gap:30px; padding:30px; border-radius:var(--radius-lg); background:#171211; color:#fff; }
.access-card h2 { font-size:42px; margin:12px 0; }
.access-card p { color:#aaa0a1; font-size:12px; line-height:1.6; }
.pro-pill { display:inline-block; padding:5px 9px; margin-right:8px; border-radius:999px; background:var(--red); font-size:9px; font-weight:800; letter-spacing:.1em; }
.access-price { display:flex; flex-direction:column; text-align:center; gap:6px; }
.access-price strong { font:700 30px "Baloo 2",sans-serif; }
.access-price small { color:#aaa0a1; }
.private-feed,.reviews-block { padding:42px 0 12px; }
.section-head.compact { margin-bottom:18px; }
.section-head.compact h2,.reviews-block h2 { font-size:36px; margin-top:8px; }
.feed-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.feed-grid div { height:180px; display:grid; place-items:center; border-radius:var(--radius-md); background:linear-gradient(145deg,#6d283c,#191415); }
.feed-grid b { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#ffffffdd; }
.reviews-block h2 small { font:700 14px "Baloo 2",sans-serif; color:var(--red); }
.reviews-block article { margin-top:12px; padding:18px; border:1px solid var(--line); border-radius:var(--radius-sm); }
.reviews-block article span { float:right; color:var(--muted); font-size:10px; }
.reviews-block article p { color:var(--muted); font-size:12px; line-height:1.6; }

.theme-toggle {
  position:relative;
  display: inline-flex;
  align-items: center;
  justify-content:space-between;
  width:66px;
  height:38px;
  padding:0 8px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px;
  background:color-mix(in srgb,var(--ink) 7%,transparent) !important;
  transition: background .3s, color .3s, transform .25s;
}

.theme-toggle:hover { transform: translateY(-1px); }
.lucide { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .lucide { position:relative; z-index:2; width:15px; height:15px; transition:color .3s,transform .35s; }
.theme-toggle .theme-sun { position:absolute; left:8px; top:11px; color:#fff; }
.theme-toggle .theme-moon { position:absolute; right:8px; top:11px; color:var(--muted); }
.toggle-thumb { position:absolute; z-index:1; left:1px; top:3px; width:30px; height:30px; border-radius:50%; background:#CE174F; box-shadow:0 5px 14px #CE174F38; transition:transform .38s cubic-bezier(.2,.9,.25,1.25),background .3s; }
.theme-toggle.is-dark .toggle-thumb { transform:translateX(34px); }
.theme-toggle.is-dark .theme-sun { color:var(--muted); transform:rotate(90deg) scale(.85); }
.theme-toggle.is-dark .theme-moon { color:#fff; transform:rotate(-10deg); }
.profile-icon-button { position:relative; display:grid; place-items:center; width:38px; height:38px; padding:0 !important; border:1px solid var(--line) !important; border-radius:50%; color:var(--ink); transition:transform .25s,background .25s !important; }
.profile-icon-button:hover { transform:translateY(-1px) scale(1.04); background:color-mix(in srgb,var(--red) 10%,transparent) !important; }
.profile-status { position:absolute; right:-1px; bottom:1px; width:9px; height:9px; border:2px solid var(--cream); border-radius:50%; background:#aaa; transition:background .25s; }
.profile-status.has-access { background:#4dcc76; }
.topbar > .brand { transform:translateX(-20px); }

html, body, .topbar, .creators, .drawer, footer, .profile-card,
.filterbar, .search input, .filter-btn, nav a, footer a, .header-actions button {
  transition: background-color .35s, color .35s, border-color .35s;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f6eee8;
  --cream: #100d0e;
  --muted: #a99fa0;
  --line: rgba(255,255,255,.14);
}

html[data-theme="dark"] body { background: #100d0e; color: #f6eee8; }
html[data-theme="dark"] .topbar { background: rgba(16,13,14,.9); }
html[data-theme="dark"] .hero::before { background: #070607; }
html[data-theme="dark"] .hero > p,
html[data-theme="dark"] .card-info p,
html[data-theme="dark"] .distance,
html[data-theme="dark"] .result-count,
html[data-theme="dark"] footer p { color: #aaa0a1; }
html[data-theme="dark"] .content-market { background: #060506; }
html[data-theme="dark"] .creators { background: #1b1718; }
html[data-theme="dark"] .join { background: #9B123D; }
html[data-theme="dark"] .drawer { background: #181415; }
html[data-theme="dark"] .city-list button,
html[data-theme="dark"] .search input,
html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .text-link,
html[data-theme="dark"] .close,
html[data-theme="dark"] .leave { color: #f6eee8; }
html[data-theme="dark"] .gate-card { background: #181415; }
html[data-theme="dark"] .ghost { border-color: #f6eee8; color: #f6eee8; }
html[data-theme="dark"] .login { border-color: #f6eee8 !important; }
html[data-theme="dark"] .noise { opacity: .09; filter: invert(1); }
html[data-theme="dark"] .tabs button.active { background:#CE174F; color:#fff; }
html[data-theme="dark"] .tabs button:not(.active):hover { background:#ffffff0d; color:#f6eee8; }
html[data-theme="dark"] .logo-sexo { fill:#fff; }
html[data-theme="dark"] .profile-view, html[data-theme="dark"] .profile-back { background:#100d0e; color:#f6eee8; }
html[data-theme="dark"] .gate-city-grid button { color:#f6eee8; }

@media (max-width: 560px) {
  .theme-toggle { width:66px; }
  .topbar { margin: 6px; border-radius: 18px; }
  .topbar > .brand { transform:translateX(30px); }
  .hero { border-radius: 0 0 32px 32px; }
  .hero::before, .hero-art { border-radius: 32px 0 0 32px; }
  .content-market, .creators, .join { margin-inline: 6px; border-radius: 32px; }
  .city-gate-card { padding:30px 18px; }
  .city-gate-card h2 { font-size:22px; }
  .gate-brand .brand-logo { width:250px; height:64px; }
  .gate-city-grid { grid-template-columns:repeat(2,1fr); }
  .profile-shell { padding-inline:14px; }
  .profile-layout { grid-template-columns:1fr; gap:28px; }
  .profile-visuals { position:static; }
  .profile-cover { height:480px; }
  .profile-heading { flex-direction:column; }
  .quick-facts { grid-template-columns:repeat(2,1fr); }
  .public-contact,.access-card { grid-template-columns:1fr; }
  .contact-actions { flex-direction:row; }
  .feed-grid div { height:130px; }
  .app-main .profiles { padding-top:12px; }
  .profiles > .section-head h2 { font-size:38px; }
  .inbox-demo { grid-template-columns:1fr; }
  .inbox-list { border-right:0; border-bottom:1px solid var(--line); }
  .chat-empty { min-height:260px; }
  .brand-logo { width:145px; height:42px; }
}

/* api */
.demo-banner { margin-bottom:18px; padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--red) 8%,transparent); color:var(--red); font-size:11px; letter-spacing:.06em; font-weight:700; }
.profiles-empty { grid-column:1/-1; padding:60px 0; color:var(--muted); font-size:14px; }
.profiles-empty a { display:inline-block; margin-top:10px; color:var(--red); font-weight:700; }
.portrait[style*="background-image"], .profile-cover.has-cover { background-size:cover; background-position:center; }
.portrait[style*="background-image"]::before, .portrait[style*="background-image"]::after,
.profile-cover.has-cover::before, .profile-cover.has-cover::after { display:none; }
.story-avatar[style*="background-image"], .avatar[style*="background-image"] { background-position:center; }
.product-art[style*="background-image"] .preview-stack { opacity:.25; }
.profile-thumbs i[style*="background-image"] { background-size:cover; background-position:center; }
.pro-grid { grid-template-columns:repeat(3,1fr); }
.pro-grid .pro-tile { height:180px; border-radius:var(--radius-md); overflow:hidden; background:linear-gradient(145deg,#6d283c,#191415); background-size:cover; background-position:center; display:grid; place-items:center; }
.pro-grid .pro-tile iframe { width:100%; height:100%; border:0; }
.pro-empty { grid-column:1/-1; padding:40px 0; color:var(--muted); font-size:12px; }
.contact-empty { margin:0; color:var(--muted); font-size:11px; max-width:170px; }
.report-row { padding:18px 0 40px; }
.report-row button { border:0; background:none; color:var(--muted); font-size:11px; text-decoration:underline; }
.report-row button:hover { color:var(--red); }
#detailSubscribe.is-pending, #detailSubscribe:disabled { opacity:.6; cursor:not-allowed; }
.profile-actions button.is-saved { border-color:var(--red); color:var(--red); }
.gate-city-grid button small { display:block; font-size:10px; opacity:.6; font-weight:600; }
.bag-drawer .drawer-note { padding:12px 14px; border-radius:var(--radius-sm); background:color-mix(in srgb,var(--red) 10%,transparent); color:var(--red); font-size:12px; }
.bag-drawer .drawer-intro { color:var(--muted); font-size:13px; line-height:1.6; }
.bag-drawer .guest-actions { display:grid; gap:10px; margin:22px 0; }
.bag-drawer .guest-actions .button { width:100%; }
.bag-drawer .google-slot { display:flex; justify-content:center; min-height:44px; }
.bag-drawer .adult-check { display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:10px; }
.bag-drawer .profile-menu a { display:flex; justify-content:space-between; padding:15px 4px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:12px; font-weight:600; }
.bag-drawer .profile-menu a span { color:var(--red); }
.bag-drawer .bag-items { min-height:0; margin-bottom:20px; }
.membership-line > button[disabled] { opacity:.3; }

/* fase 4 */
.visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
a.profile-card, a.creator, .story-strip a.story { color:inherit; text-decoration:none; }
a.profile-card { display:block; }
.profile-card:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
.profile-card:focus-visible .view-profile { transform:none; opacity:1; }
.story-strip a.story { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:66px; }
.story-strip a.story:focus-visible, a.creator:focus-visible { outline:2px solid var(--red); outline-offset:4px; border-radius:14px; }
a.creator { display:block; }
.bg-loaded { background-size:cover !important; background-position:center !important; }
.filter-btn span[hidden], #filterCount[hidden] { display:none; }
.tabs button:focus-visible, .filter-btn:focus-visible, .search input:focus-visible { outline:2px solid var(--red); outline-offset:2px; }

/* esqueletos */
.skeleton-card { pointer-events:none; }
.skeleton, .skeleton-line { position:relative; overflow:hidden; background:color-mix(in srgb,var(--ink) 8%,transparent) !important; }
.skeleton::before, .skeleton::after { display:none !important; }
.skeleton::after, .skeleton-line::after { content:""; display:block !important; position:absolute; inset:0; width:auto; height:auto; left:0; top:0; border-radius:0; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cream) 55%,transparent),transparent) !important; transform:translateX(-100%); animation:skeleton-shine 1.2s infinite; }
.skeleton-line { display:block; width:120px; height:14px; margin:4px 0 8px; border-radius:8px; }
.skeleton-line.short { width:70px; height:10px; }
@keyframes skeleton-shine { to { transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce) { .skeleton::after, .skeleton-line::after { animation:none; } }

/* estados del listado */
.profiles-empty .button { margin-top:14px; }
.profiles-empty b { color:var(--ink); }
.profiles-error b { color:var(--red); }
.grid-more { display:flex; flex-direction:column; align-items:center; gap:10px; padding:34px 0 10px; }
.grid-more:empty { display:none; }
.grid-more small { color:var(--muted); font-size:11px; }
.grid-more .button { min-width:200px; background:transparent; color:var(--ink); }
.grid-more .button:disabled { opacity:.6; cursor:progress; }

/* hoja de filtros */
.filter-drawer { display:flex; flex-direction:column; padding:52px 34px 0; overflow:hidden; z-index:70; }
.filter-drawer h2 { font-size:44px; margin:0 0 16px; outline:none; }
.filter-form { flex:1; overflow-y:auto; margin:0 -6px; padding:0 6px 20px; }
.filter-form fieldset { margin:0; padding:18px 0; border:0; border-bottom:1px solid var(--line); }
.filter-form legend { padding:0; margin-bottom:10px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--muted); }
.filter-form legend label { cursor:default; }
.range-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.range-pair label { display:flex; flex-direction:column; gap:6px; font-size:11px; color:var(--muted); }
.filter-form input[type=number], .filter-form select { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:transparent; color:var(--ink); font:600 14px "Baloo 2",sans-serif; }
.filter-form select option { color:#13100f; }
.filter-form input[type=range] { width:100%; accent-color:var(--red); }
.filter-form output { display:block; margin-top:4px; font-size:13px; font-weight:700; }
.check-row { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:14px; cursor:pointer; }
.check-row input { width:18px; height:18px; accent-color:var(--red); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { padding:8px 13px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); font-size:12px; }
.chip small { opacity:.55; margin-left:2px; }
.chip.active { background:var(--red); border-color:var(--red); color:#fff; }
.chip:focus-visible, .filter-form input:focus-visible, .filter-form select:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.filter-hint { margin:0; color:var(--muted); font-size:12px; }
.filter-actions { display:grid; grid-template-columns:1fr 1.6fr; gap:10px; padding:16px 0 26px; border-top:1px solid var(--line); background:inherit; }
.filter-actions .button { width:100%; background:transparent; color:var(--ink); }
.filter-actions .button.primary { background:var(--red); color:#fff; }

/* galería de la ficha */
.profile-cover .badge { z-index:3; }
.gallery-zoom { position:absolute; inset:0; z-index:1; width:100%; border:0; background:transparent; cursor:zoom-in; }
.gallery-zoom:focus-visible { outline:3px solid var(--red); outline-offset:-6px; border-radius:var(--radius-lg); }
.gallery-nav { position:absolute; z-index:2; top:calc(50% - 22px); width:44px; height:44px; border:0; border-radius:50%; background:#ffffffe6; color:#171211; font-size:26px; line-height:1; box-shadow:0 8px 24px #0003; }
.gallery-nav.prev { left:14px; }
.gallery-nav.next { right:14px; }
.gallery-count { position:absolute; z-index:2; right:16px; bottom:16px; padding:5px 10px; border-radius:999px; background:#171211bb; color:#fff; font-size:11px; font-weight:700; }
.profile-thumbs .gallery-thumb { height:92px; padding:0; border:2px solid transparent; border-radius:var(--radius-sm); background:linear-gradient(145deg,#d4a49b,#5f2834); cursor:pointer; transition:border-color .2s,transform .2s; }
.profile-thumbs .gallery-thumb:hover { transform:translateY(-2px); }
.profile-thumbs .gallery-thumb.active { border-color:var(--red); }
.profile-thumbs .gallery-thumb:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.profile-thumbs { grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); }
.availability.is-off { color:var(--muted); }
#detailName:focus { outline:none; }
#detailName:focus-visible { outline:2px solid var(--red); outline-offset:6px; border-radius:8px; }

.lightbox { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:60px 70px; background:rgba(10,7,8,.94); }
.lightbox[hidden] { display:none; }
.lightbox img { max-width:100%; max-height:calc(100vh - 120px); border-radius:var(--radius-md); object-fit:contain; box-shadow:0 30px 80px #000a; }
.lightbox-close { position:absolute; top:18px; right:22px; width:46px; height:46px; border:0; border-radius:50%; background:#ffffff1f; color:#fff; font-size:28px; }
.lightbox-nav { position:absolute; top:calc(50% - 26px); width:52px; height:52px; border:0; border-radius:50%; background:#ffffff1f; color:#fff; font-size:30px; }
.lightbox-nav.prev { left:14px; }
.lightbox-nav.next { right:14px; }
.lightbox-count { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#ddd; font-size:12px; font-weight:700; }
.lightbox button:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* relacionados */
.related-block { padding:42px 0 12px; }
.related-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.related-grid .portrait { height:240px; }
.related-grid .card-info { flex-direction:column; gap:2px; }
.related-grid .card-info h3 { font-size:18px; }

/* aviso */
.toast { position:fixed; left:50%; bottom:28px; z-index:140; padding:12px 20px; border-radius:999px; background:#171211; color:#fff; font-size:13px; font-weight:700; box-shadow:0 14px 40px #0004; transform:translate(-50%,20px); opacity:0; transition:transform .25s,opacity .25s; }
.toast.show { transform:translate(-50%,0); opacity:1; }
html[data-theme="dark"] .toast { background:#f6eee8; color:#13100f; }

.gate-enter { width:100%; margin-top:22px; }
.gate-enter[hidden] { display:none; }

@media (max-width: 900px) {
  .related-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px) {
  .filter-drawer { width:100vw; margin:0; height:100%; border-radius:0; padding:48px 18px 0; }
  .filter-drawer h2 { font-size:36px; }
  .search { flex:1; display:flex; align-items:center; min-width:0; }
  .search input { width:100%; min-width:0; }
  .profiles > .section-head { flex-direction:column; gap:6px; margin-bottom:20px; }
  .profiles > .section-head .result-count { display:block; }
  .filterbar { gap:8px; }
  .related-grid .portrait { height:200px; }
  .lightbox { padding:60px 10px; }
  .lightbox-nav { top:auto; bottom:14px; }
  .gallery-nav { width:38px; height:38px; font-size:22px; }
  .grid-more .button { width:100%; }
}
