:root { --affiliate-ink: #071a5d; --affiliate-green: #087d54; --affiliate-sand: #fff9e9; --affiliate-sun: #f5bc18; --affiliate-line: #d7e0dd; --affiliate-muted: #51616b; }
.affiliate-page { min-height: 100vh; margin: 0; color: var(--affiliate-ink); background: linear-gradient(160deg, #eef5f1 0%, #fff9e9 48%, #edf2ff 100%); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.affiliate-header { max-width: 1160px; padding: 18px 24px; margin: auto; display: flex; justify-content: space-between; align-items: center; }
.affiliate-brand { display: inline-flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; }.affiliate-brand img { width: 46px; height: 46px; object-fit: cover; border: 3px solid var(--affiliate-sun); border-radius: 50%; }.affiliate-brand strong,.affiliate-brand small { display:block; }.affiliate-brand small { color: var(--affiliate-muted); font-size: .76rem; }
.affiliate-link { color: var(--affiliate-ink); font-weight: 800; }.affiliate-header-actions { display:flex; align-items:center; gap:16px; }.affiliate-link-button { padding:9px 13px; cursor:pointer; border:1px solid var(--affiliate-ink); border-radius:9px; background:transparent; font:inherit; font-size:.9rem; font-weight:800; }.affiliate-main { max-width: 1160px; min-height: calc(100vh - 145px); margin: auto; padding: 16px 24px 56px; }.affiliate-hero { overflow: hidden; padding: 56px; border-radius: 30px; color: #fff; background: linear-gradient(105deg, rgba(7,26,93,.96), rgba(7,26,93,.78)), url('/brand/sergio-hero.jpg') center/cover; box-shadow: 0 22px 55px rgba(7,26,93,.22); }.affiliate-hero>h1 { max-width: 680px; margin: 12px 0; font: 800 clamp(2.2rem,5vw,4.6rem)/.98 Georgia, serif; }.affiliate-hero>p { max-width: 650px; font-size: 1.1rem; line-height: 1.55; }.affiliate-eyebrow { display:block; color: var(--affiliate-green); font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }.affiliate-hero .affiliate-eyebrow { color: var(--affiliate-sun); }.campaign-number { display:inline-block; color: var(--affiliate-ink); background: var(--affiliate-sun); padding: 5px 10px; border-radius: 6px; font-weight: 950; letter-spacing: .04em; }
.signup-card { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 28px; margin-top: 38px; color: var(--affiliate-ink); background:#fff; border-radius: 22px; }.signup-copy h2,.supporters-section h2,.profile-panel h1,.created-panel h1,.affiliate-dashboard h1 { margin: 8px 0 12px; font: 800 clamp(1.7rem,3vw,2.6rem)/1.08 Georgia, serif; }.signup-copy p,.affiliate-note,.profile-message { color: var(--affiliate-muted); line-height: 1.55; }
.signup-copy .affiliate-referral-notice { border-left: 4px solid var(--affiliate-sun); border-radius: 8px; padding: 10px 12px; color: var(--affiliate-ink); background: #fff6d5; font-size: .82rem; font-weight: 750; }
.affiliate-form { display:grid; gap: 13px; }.affiliate-form label { display:grid; gap: 6px; color: var(--affiliate-ink); font-size:.9rem; font-weight:800; }.affiliate-form input:not([type=checkbox]) { min-height:44px; box-sizing:border-box; padding: 10px 12px; border:1px solid var(--affiliate-line); border-radius:10px; font:inherit; }.photo-picker input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }.photo-picker span { padding:12px; color:var(--affiliate-green); text-align:center; border: 1px dashed var(--affiliate-green); border-radius:10px; cursor:pointer; }.consent-row { grid-template-columns:20px 1fr; align-items:start; font-weight:500!important; color:var(--affiliate-muted)!important; }.photo-preview { position:relative; overflow:hidden; max-width:190px; aspect-ratio:1; border-radius:18px; }.photo-preview img { width:100%;height:100%;object-fit:cover; }.supporter-stamp { position:absolute; right:8px; bottom:10px; padding:4px 7px; color:#fff; background:var(--affiliate-green); border:2px solid var(--affiliate-sun); border-radius:5px; font-size:.62rem; font-weight:950; letter-spacing:.07em; transform:rotate(-4deg); }
.affiliate-password-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.affiliate-password-help { margin-top:-5px; color:var(--affiliate-muted); font-size:.76rem; line-height:1.45; }
.affiliate-button { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding: 0 18px; color:#fff; font:800 .92rem/1 Inter, sans-serif; text-decoration:none; cursor:pointer; border:0; border-radius:10px; background:var(--affiliate-green); }.affiliate-button:hover { filter:brightness(.9); }.affiliate-button:focus-visible,.affiliate-link:focus-visible { outline:3px solid var(--affiliate-sun); outline-offset:3px; }.affiliate-button:disabled { opacity:.62; cursor:wait; }.affiliate-button-secondary { color:var(--affiliate-ink); background:var(--affiliate-sun); }.affiliate-note { margin:0; font-size:.8rem; }
.affiliate-page.has-affiliate-whatsapp-float .affiliate-main { padding-bottom:130px; }
.affiliate-whatsapp-float { position:fixed; right:max(24px,env(safe-area-inset-right)); bottom:max(24px,env(safe-area-inset-bottom)); z-index:1000; min-height:58px; padding:0 24px; color:#fff; border:3px solid #fff; border-radius:999px; background:#087d54; box-shadow:0 10px 30px rgba(8,125,84,.48); animation:affiliate-whatsapp-attention 1.6s ease-in-out infinite; }
.affiliate-whatsapp-float::before { content:'●'; margin-right:10px; color:#75f0b3; font-size:1rem; }
.affiliate-whatsapp-float:hover,.affiliate-whatsapp-float:focus-visible { filter:none; background:#05633f; animation-play-state:paused; transform:scale(1.03); }
@keyframes affiliate-whatsapp-attention { 0%,100% { transform:scale(1); box-shadow:0 10px 30px rgba(8,125,84,.48),0 0 0 0 rgba(8,125,84,.36); } 50% { transform:scale(1.055); box-shadow:0 14px 38px rgba(8,125,84,.58),0 0 0 14px rgba(8,125,84,0); } }
.supporters-section { padding: 54px 0; }.supporter-list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 16px; }.supporter-count { margin:0; color:var(--affiliate-muted); }.supporter-page-size { display:flex; align-items:center; gap:8px; color:var(--affiliate-ink); font-size:.82rem; font-weight:800; white-space:nowrap; }.supporter-page-size select { min-height:44px; padding:0 34px 0 12px; color:var(--affiliate-ink); border:1px solid var(--affiliate-line); border-radius:9px; background:#fff; font:inherit; cursor:pointer; }.supporter-page-size select:focus-visible { outline:3px solid var(--affiliate-sun); outline-offset:2px; }.supporters-grid { display:grid; grid-template-columns:repeat(20,minmax(0,1fr)); gap:8px; }.supporter-card { overflow:hidden; display:grid; background:#fff; border:1px solid rgba(7,26,93,.08); border-radius:18px; }.supporter-card-grid { position:relative; overflow:visible; min-width:0; border:0; border-radius:9px; background:transparent; }.supporter-card-grid:hover,.supporter-card-grid:focus-within { z-index:10; }.supporter-card-link { position:relative; display:block; min-width:44px; min-height:44px; color:inherit!important; text-decoration:none; border-radius:9px; }.supporter-card-link:focus-visible { outline:3px solid var(--affiliate-sun); outline-offset:3px; }.supporter-card-grid .supporter-photo-frame { margin:0; border:2px solid #d4af37; border-radius:8px; background:#eef2f0; box-shadow:0 2px 4px rgba(0,0,0,.1); transition:transform .2s ease; }.supporter-card-grid .supporter-photo-frame:before { display:none; }.supporter-card-link:hover .supporter-photo-frame,.supporter-card-link:focus-visible .supporter-photo-frame { transform:scale(1.1); }.supporter-card-grid .supporter-stamp { display:none; }.supporter-grid-name { position:absolute; bottom:115%; left:50%; z-index:15; width:max-content; max-width:180px; padding:6px 10px; color:#fff; border-radius:6px; background:#1e3a8a; box-shadow:0 4px 6px rgba(0,0,0,.3); font-size:.75rem; font-weight:800; line-height:1.25; text-align:center; transform:translate(-50%,4px); visibility:hidden; opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease,visibility .2s ease; }.supporter-grid-name:before { position:absolute; top:100%; bottom:auto; left:50%; content:""; border:6px solid transparent; border-top-color:#1e3a8a; transform:translateX(-50%); }.supporter-card-link:hover .supporter-grid-name,.supporter-card-link:focus-visible .supporter-grid-name { transform:translate(-50%,0); visibility:visible; opacity:1; }.supporter-photo-frame { position:relative; aspect-ratio:1; margin:11px 11px 0; overflow:hidden; border:4px solid var(--affiliate-green); border-radius:14px; }.supporter-photo-frame:before { position:absolute; inset:0; z-index:1; content:""; border:7px solid var(--affiliate-sun); border-left-color:transparent; border-bottom-color:transparent; pointer-events:none; }.supporter-photo-frame img { display:block; width:100%; height:100%; object-fit:cover; }.supporter-card-body { padding:14px; }.supporter-card h2 { margin:5px 0 10px; font:800 1.3rem/1.05 Georgia,serif; }.supporter-card a { color:var(--affiliate-green); font-weight:800; }.supporter-card-featured { grid-template-columns:minmax(240px, 360px) 1fr; max-width:780px; text-align:left; }.supporter-card-featured .supporter-photo-frame { margin:0; border-radius:0; }.supporter-card-featured .supporter-card-body { align-self:center; padding:32px; }.supporter-card-featured h1 { margin:6px 0 0; }.affiliate-empty { color:var(--affiliate-muted); }
.supporter-pagination { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:30px; }
.supporter-page-link { display:inline-flex; min-height:44px; align-items:center; justify-content:center; border:2px solid var(--affiliate-green); border-radius:10px; padding:0 16px; color:var(--affiliate-green); background:#fff; font-size:.84rem; font-weight:850; text-decoration:none; }
.supporter-page-link:hover,.supporter-page-link:focus-visible { color:#fff; background:var(--affiliate-green); }
.supporter-page-link.disabled { cursor:not-allowed; border-color:var(--affiliate-line); color:var(--affiliate-muted); background:#f2f4f3; }
.supporter-page-status { color:var(--affiliate-ink); font-size:.82rem; font-weight:800; }
.profile-panel,.created-panel,.affiliate-dashboard { max-width:780px; padding:34px; margin:35px auto; background:#fff; border-radius:24px; box-shadow:0 18px 42px rgba(7,26,93,.12); }.profile-panel { display:grid; gap:18px; text-align:center; }.profile-panel .affiliate-button { width:auto; justify-self:center; }.created-panel,.affiliate-dashboard { display:grid; gap:18px; }.link-block { display:grid; gap:9px; padding:16px; background:var(--affiliate-sand); border-radius:14px; }.share-input { width:100%; min-height:42px; box-sizing:border-box; padding:8px; color:var(--affiliate-ink); background:#fff; border:1px solid var(--affiliate-line); border-radius:8px; font:inherit; }.affiliate-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }.affiliate-stat { padding:20px; background:var(--affiliate-ink); color:#fff; border-radius:16px; }.affiliate-stat-points { color:var(--affiliate-ink); background:var(--affiliate-sun); }.affiliate-stat span,.affiliate-stat small { display:block; }.affiliate-stat strong { display:block; padding:8px 0; font-size:2.3rem; }.reward-notice { padding:16px; color:#765700; background:#fff3ca; border-left:4px solid var(--affiliate-sun); border-radius:10px; }.recent-interactions { padding-top:8px; border-top:1px solid var(--affiliate-line); }.recent-interactions h2 { font:800 1.3rem Georgia,serif; }.recent-interactions p { color:var(--affiliate-muted); }.affiliate-footer { padding:28px; color:var(--affiliate-muted); text-align:center; font-size:.8rem; }
.supporters-group-card { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:20px; text-align:left; color:#fff; border-radius:16px; background:linear-gradient(120deg,#071a5d,#087d54); box-shadow:0 12px 28px rgba(7,26,93,.18); }.supporters-group-copy { min-width:0; }.supporters-group-card .affiliate-eyebrow { color:#f5bc18; }.supporters-group-card h2 { margin:5px 0; font:800 1.35rem/1.1 Georgia,serif; }.supporters-group-card p { margin:0; color:#eefbf5; font-size:.86rem; line-height:1.5; }.supporters-group-card .affiliate-group-button { flex:0 0 auto; min-height:48px; color:#071a5d; background:#f5bc18; }.supporters-group-card .affiliate-group-button:hover { background:#ffd14c; filter:none; }
.supporter-access-dialog { width:min(92vw,470px); padding:0; color:var(--affiliate-ink); border:0; border-radius:20px; box-shadow:0 24px 70px rgba(7,26,93,.3); }.supporter-access-dialog::backdrop { background:rgba(7,26,60,.66); }.supporter-access-dialog form { position:relative; display:grid; gap:15px; padding:30px; }.supporter-access-dialog h2 { margin:0; font:800 2rem/1.05 Georgia,serif; }.supporter-access-dialog p { margin:0; color:var(--affiliate-muted); line-height:1.5; }.supporter-access-dialog label { display:grid; gap:6px; font-size:.85rem; font-weight:800; }.supporter-access-dialog input { min-height:44px; box-sizing:border-box; padding:10px 12px; border:1px solid var(--affiliate-line); border-radius:10px; font:inherit; }.supporter-dialog-close { position:absolute; top:14px; right:14px; width:34px; height:34px; cursor:pointer; border:0; border-radius:50%; background:var(--affiliate-sand); color:var(--affiliate-ink); font-size:1.5rem; }.affiliate-form-error { padding:10px!important; color:#9d261f!important; background:#fff0ee; border-radius:8px; font-size:.82rem; }
@media (min-width:721px) and (max-width:1100px) { .supporters-grid { grid-template-columns:repeat(10,minmax(0,1fr)); } }
@media (max-width: 720px) { .affiliate-header,.affiliate-main { padding-left:16px; padding-right:16px; }.affiliate-header-actions { gap:8px; }.affiliate-link { font-size:.78rem; }.affiliate-link-button { padding:8px; }.affiliate-hero { padding:34px 22px; }.signup-card { grid-template-columns:1fr; margin-top:26px; padding:20px; }.supporter-list-toolbar { align-items:flex-start; flex-direction:column; }.supporters-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }.supporter-card-featured { grid-template-columns:1fr; }.supporter-card-featured .supporter-photo-frame { max-height:350px; }.affiliate-stats { grid-template-columns:1fr; }.profile-panel,.created-panel,.affiliate-dashboard { padding:22px; margin:18px 0; }.affiliate-brand small { display:none; }.supporters-group-card { display:grid; gap:16px; }.supporters-group-card .affiliate-group-button { width:100%; box-sizing:border-box; }.affiliate-whatsapp-float { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); width:calc(100vw - 32px); box-sizing:border-box; padding:0 16px; }.supporter-pagination { display:grid; grid-template-columns:1fr 1fr; }.supporter-page-status { grid-column:1/-1; grid-row:1; text-align:center; }.supporter-page-link { padding:0 10px; } }
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition:none!important; }.affiliate-whatsapp-float { animation:none!important; } }