:root {
  --ink: #101827;
  --muted: #667085;
  --paper: #f4f5f7;
  --surface: #fff;
  --line: #e4e7ec;
  --accent: #e8362a;
  --accent-dark: #bd251d;
  --navy: #09111f;
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.site-header {
  position: sticky; top: 0; z-index: 20; min-height: 76px; padding: 12px clamp(18px, 4vw, 64px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(16,24,39,.08); backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: white; background: var(--navy); font-weight: 900; letter-spacing: -.06em; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 19px; }
.brand small { margin-top: 1px; color: var(--muted); font-size: 11px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.ghost-button, .cart-button, .filter { border: 1px solid var(--line); background: white; color: var(--ink); font-weight: 750; border-radius: 999px; padding: 11px 17px; }
.cart-button { color: white; background: var(--navy); border-color: var(--navy); }
.cart-button span { display: inline-grid; min-width: 23px; height: 23px; place-items: center; margin-left: 7px; border-radius: 20px; background: var(--accent); }

main { min-height: calc(100vh - 140px); }
.club-screen { padding: clamp(56px, 9vw, 120px) clamp(18px, 6vw, 96px) 96px; }
.hero-copy { max-width: 780px; margin: 0 auto 50px; text-align: center; }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .16em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 16px; font-size: clamp(42px, 7vw, 82px); letter-spacing: -.055em; line-height: .98; }
.hero-copy p { color: var(--muted); font-size: clamp(17px, 2vw, 21px); }
.club-grid { max-width: 1180px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.club-card { position: relative; overflow: hidden; min-height: 390px; padding: 30px; border: 0; border-radius: 30px; color: white; background: var(--club-color); box-shadow: 0 18px 50px rgba(16,24,39,.14); text-align: center; isolation: isolate; transition: transform .22s ease, box-shadow .22s ease; }
.club-card::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.24), transparent 38%), linear-gradient(155deg, transparent 55%, rgba(0,0,0,.23)); }
.club-card:hover { transform: translateY(-7px); box-shadow: 0 26px 65px rgba(16,24,39,.2); }
.club-card img { width: min(74%, 235px); height: 245px; object-fit: contain; filter: drop-shadow(0 14px 17px rgba(0,0,0,.25)); }
.club-card strong { display: block; margin-top: 20px; font-size: 24px; }
.club-card span { display: block; margin-top: 6px; font-size: 13px; font-weight: 750; opacity: .8; }

.gallery-screen { padding: 32px clamp(16px, 4vw, 64px) 90px; }
.club-hero { max-width: 1320px; margin: 0 auto 28px; display: flex; align-items: center; gap: 24px; padding: 22px clamp(22px, 4vw, 46px); border-radius: 28px; color: white; background: var(--club-color, var(--navy)); overflow: hidden; }
.club-hero img { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0,0,0,.2)); }
.club-hero h1 { margin: 5px 0 6px; font-size: clamp(32px, 5vw, 60px); }
.club-hero p { margin: 0; opacity: .78; }
.filters { max-width: 1320px; margin: 0 auto 24px; display: flex; gap: 8px; overflow-x: auto; }
.filter.active { color: white; background: var(--navy); border-color: var(--navy); }
.gallery-grid { max-width: 1320px; margin: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.photo-card { overflow: hidden; border-radius: var(--radius); background: white; box-shadow: 0 8px 25px rgba(16,24,39,.08); }
.photo-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #dce0e6; cursor: zoom-in; }
.photo-media.portrait { aspect-ratio: 4/5; }
.photo-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.photo-card:hover .photo-media img { transform: scale(1.035); }
.watermarked::after { content:"FOTOCLUB  ·  MUESTRA"; position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.62); font-size:clamp(18px, 3vw, 34px); font-weight:950; letter-spacing:.16em; text-shadow:0 2px 8px rgba(0,0,0,.5); transform:rotate(-23deg); pointer-events:none; }
.watermarked::before { content:"FOTOCLUB     FOTOCLUB     FOTOCLUB"; position:absolute; z-index:1; left:-20%; right:-20%; top:18%; color:rgba(255,255,255,.26); font-size:14px; font-weight:900; letter-spacing:.26em; transform:rotate(-23deg); pointer-events:none; }
.photo-content { padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.photo-content strong, .photo-content small { display: block; }
.photo-content small { margin-top: 3px; color: var(--muted); }
.select-button { flex: 0 0 auto; border: 0; border-radius: 12px; padding: 10px 13px; font-weight: 850; color: white; background: var(--navy); }
.select-button.selected { background: var(--accent); }
.team-offer { max-width: 1320px; margin: 34px auto 0; padding: clamp(26px, 5vw, 50px); border-radius: 30px; display:flex; align-items:center; justify-content:space-between; gap:30px; color:white; background:linear-gradient(125deg, #0a1220, #1a2a45); }
.team-offer h2 { margin: 8px 0 10px; font-size: clamp(32px, 5vw, 55px); letter-spacing: -.04em; }
.team-offer p { max-width: 690px; margin-bottom:0; color:#cbd5e1; font-size:17px; }
.offer-badge { display:inline-block; padding:7px 10px; border-radius:8px; color:#111827; background:#ffdc26; font-size:11px; font-weight:950; letter-spacing:.12em; }
.primary-button { border:0; border-radius:14px; padding:14px 18px; color:white; background:var(--accent); font-weight:900; }
.primary-button:hover { background:var(--accent-dark); }

footer { min-height: 64px; padding: 18px clamp(18px, 4vw, 64px); display:flex; justify-content:space-between; color:var(--muted); background:white; font-size:13px; }
footer button { padding:0; border:0; color:var(--muted); background:none; text-decoration:underline; }

dialog { border:0; padding:0; }
dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(10px); }
.lightbox { position:fixed; inset:0; width:100vw; height:100vh; max-width:none; max-height:none; overflow:hidden; color:white; background:rgba(0,0,0,.72); }
.lightbox-blur { position:absolute; inset:-40px; background:center/cover no-repeat; filter:blur(35px) brightness(.24); transform:scale(1.08); }
.lightbox figure { position:relative; z-index:2; width:min(1120px, 86vw); height:100%; margin:auto; padding:54px 0 30px; display:flex; flex-direction:column; justify-content:center; }
.lightbox-photo { position:relative; min-height:0; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lightbox-photo img { max-width:100%; max-height:calc(100vh - 150px); object-fit:contain; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox figcaption { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:16px; }
.lightbox figcaption strong, .lightbox figcaption span { display:block; }
.lightbox figcaption span { margin-top:4px; color:#cbd5e1; font-size:13px; }
.lightbox-close, .lightbox-arrow { position:absolute; z-index:4; border:0; color:white; background:rgba(0,0,0,.45); }
.lightbox-close { top:20px; right:22px; width:44px; height:44px; border-radius:50%; font-size:29px; }
.lightbox-arrow { top:50%; width:50px; height:64px; border-radius:15px; font-size:48px; line-height:1; transform:translateY(-50%); }
.lightbox-arrow.prev { left:20px; }.lightbox-arrow.next { right:20px; }

.order-drawer { height:100vh; width:min(560px, 100vw); max-height:none; margin:0 0 0 auto; background:white; }
.order-drawer[open] { animation:drawer-in .25s ease-out; }
@keyframes drawer-in { from { transform:translateX(100%); } }
.drawer-shell { height:100%; display:flex; flex-direction:column; }
.drawer-header { padding:24px; display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--line); }
.drawer-header h2 { margin:5px 0 0; font-size:28px; }
.icon-button { width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:white; font-size:25px; }
.drawer-body { flex:1; overflow:auto; padding:0 24px 24px; }
.drawer-body section { padding-top:23px; }
.drawer-body h3 { margin-bottom:13px; font-size:16px; }
.selected-list { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.selected-thumb { position:relative; aspect-ratio:1; overflow:hidden; border-radius:10px; background:#eee; }
.selected-thumb img { width:100%; height:100%; object-fit:cover; }
.selected-thumb button { position:absolute; top:4px; right:4px; width:24px; height:24px; border:0; border-radius:50%; color:white; background:rgba(0,0,0,.7); }
.empty-state { grid-column:1/-1; padding:22px; border:1px dashed #cbd0d8; border-radius:14px; color:var(--muted); text-align:center; }
.product-list { display:grid; gap:9px; }
.product-option { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:15px; cursor:pointer; }
.product-option:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 2px rgba(232,54,42,.12); }
.product-option input { accent-color:var(--accent); }
.product-option strong, .product-option small { display:block; }
.product-option small { margin-top:3px; color:var(--muted); }
.product-option > b { font-size:18px; }
.validation-message { min-height:18px; margin:10px 0 0; color:#b42318; font-size:13px; }
.customer-fields { display:grid; gap:12px; }
.customer-fields h3 { margin-bottom:0; }
.customer-fields label:not(.payment), .manager-shell label { display:grid; gap:6px; color:var(--muted); font-size:13px; font-weight:700; }
input[type="text"], input[type="email"], input[type="file"], select { width:100%; padding:12px; border:1px solid #cfd4dc; border-radius:11px; color:var(--ink); background:white; }
fieldset { margin:0; padding:12px; border:1px solid var(--line); border-radius:12px; }
legend { color:var(--muted); font-size:13px; font-weight:700; }
.payment { display:inline-flex; gap:6px; margin-right:18px; }
.drawer-total { padding:17px 24px; display:flex; justify-content:space-between; border-top:1px solid var(--line); font-size:20px; }
.checkout-button { margin:0 24px 24px; padding:17px; border:0; border-radius:15px; color:white; background:var(--accent); font-weight:950; }

.manager-dialog, .success-dialog { width:min(520px, calc(100vw - 28px)); border-radius:22px; }
.manager-shell { padding:0 24px 26px; display:grid; gap:16px; }
.manager-shell .drawer-header { margin:0 -24px; }
.manager-shell p { margin:0; color:var(--muted); }
.manager-status { min-height:20px; font-size:13px; }
.success-shell { padding:42px; text-align:center; }
.success-icon { width:62px; height:62px; margin:0 auto 20px; display:grid; place-items:center; border-radius:50%; color:white; background:#079455; font-size:32px; }
.success-shell h2 { margin:8px 0; font-size:36px; }
.success-shell p { color:var(--muted); }

@media (max-width: 900px) {
  .club-grid { grid-template-columns:1fr; max-width:570px; }
  .club-card { min-height:300px; }
  .club-card img { height:180px; }
  .gallery-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .team-offer { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 620px) {
  .site-header { min-height:68px; padding:10px 14px; }
  .brand small, .ghost-button { display:none; }
  .brand-mark { width:40px; height:40px; }
  .club-screen { padding-top:50px; }
  .club-card { min-height:255px; }
  .club-card img { height:150px; }
  .club-hero { align-items:flex-start; gap:14px; }
  .club-hero img { width:74px; height:74px; }
  .gallery-grid { gap:10px; }
  .photo-content { align-items:flex-start; flex-direction:column; padding:12px; }
  .select-button { width:100%; }
  .watermarked::after { font-size:12px; }
  .lightbox figure { width:94vw; padding-bottom:20px; }
  .lightbox figcaption { align-items:stretch; flex-direction:column; }
  .lightbox-arrow { top:auto; bottom:85px; width:42px; height:48px; }
  .lightbox-arrow.prev { left:12px; }.lightbox-arrow.next { right:12px; }
  footer { gap:12px; flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }