/* The original palette, grain and typography are inherited from styles.css. */
.social-page { min-height: 100svh; background: var(--bg); }
.social-shell { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.social-skip { position: fixed; top: 12px; left: 16px; z-index: 100; padding: 14px; color: var(--bg); background: var(--gold); transform: translateY(-160%); }
.social-skip:focus { transform: none; }
.social-ribbon { position: relative; display: flex; justify-content: center; gap: 28px; padding: 10px 16px; background: var(--gold); color: var(--bg); font-size: 9px; letter-spacing: 2.5px; font-weight: 800; }
.social-header { display: flex; align-items: center; justify-content: space-between; padding-block: 30px; border-bottom: 1px solid var(--line); }
.social-back { display: flex; align-items: center; gap: 20px; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; }
.social-back span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); font-size: 20px; transition: transform .4s var(--ease), background .4s; }
.social-back:hover span { transform: rotate(-45deg); background: var(--panel2); }
.social-main { position: relative; isolation: isolate; padding: 64px 0 54px; }
.social-main::before { content: ''; position: absolute; z-index: -1; inset: -80px -48px 20%; pointer-events: none; background: radial-gradient(ellipse at 85% 20%, rgba(213,173,107,.09), transparent 55%); }
.social-intro { display: flex; align-items: center; justify-content: space-between; gap: 36px; margin-bottom: 44px; }
.social-kicker { display: flex; align-items: center; gap: 14px; font-size: 10px; font-weight: 700; letter-spacing: 2.6px; color: var(--gold); }
.social-kicker::before { content: ''; width: 30px; height: 1px; background: var(--gold); }
.social-title { margin: 22px 0 20px; font: 400 clamp(42px, 5.2vw, 72px)/1.08 var(--serif); letter-spacing: -2px; }
.social-title em { color: var(--gold); font-weight: 400; }
.social-lead { max-width: 490px; color: var(--mute); font-size: 13px; line-height: 1.9; margin: 0; }
.social-seal { position: relative; display: grid; place-items: center; flex: 0 0 188px; height: 188px; margin-right: 30px; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); }
.social-seal::before { content: ''; position: absolute; inset: 12px; border: 1px dashed rgba(213,173,107,.35); border-radius: 50%; animation: social-orbit 48s linear infinite; }
.social-seal::after { content: '✦'; position: absolute; inset: -8px; text-align: center; font-size: 16px; animation: social-orbit 30s linear infinite; }
.social-seal-core { display: grid; justify-items: center; gap: 10px; }
.social-seal-core strong { font: 400 42px var(--serif); }
.social-seal-core small { font-size: 8px; letter-spacing: 2px; }
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; perspective: 1200px; }
.social-card { --accent: var(--gold); position: relative; display: grid; grid-template-columns: 104px 1fr 32px; align-items: center; gap: 26px; min-height: 208px; padding: 44px 30px 30px; border: 1px solid var(--line); border-radius: 3px; background: linear-gradient(125deg, #151b1b, #0d1213); isolation: isolate; transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: transform .35s var(--ease), border-color .35s, background .35s; }
.social-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; border-radius: inherit; background: radial-gradient(ellipse at 12% 65%, var(--accent), transparent 65%); opacity: 0; transition: opacity .4s; }
.social-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.social-card:hover, .social-card:focus-visible { border-color: var(--accent); }
.social-card:hover::before, .social-card:focus-visible::before { opacity: .12; }
.social-card:hover::after, .social-card:focus-visible::after { transform: scaleX(1); }
.social-card-meta { position: absolute; top: 18px; left: 25px; right: 25px; display: flex; justify-content: space-between; color: var(--mute); font-size: 8px; font-weight: 600; letter-spacing: 1.7px; }
.social-state { color: var(--gold); }
.social-card[aria-disabled="true"] .social-state { color: var(--mute); }
.social-bubble { position: relative; width: 100px; height: 100px; display: grid; place-items: center; border-radius: 50%; color: var(--gold); background: #1b2221; border: 1px solid rgba(213,173,107,.3); transition: transform .65s var(--ease), color .4s, border-color .4s, background .4s; }
.social-bubble::before { content: ''; position: absolute; inset: -8px; border: 1px dashed rgba(213,173,107,.2); border-radius: 50%; transition: transform .8s var(--ease), border-color .4s; }
.social-bubble svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.social-bubble .filled-mark { fill: currentColor; stroke: none; }
.social-card:hover .social-bubble, .social-card:focus-visible .social-bubble { transform: scale(1.12) rotate(-12deg); border-color: var(--accent); color: var(--accent); background: #222829; }
.social-card:hover .social-bubble::before, .social-card:focus-visible .social-bubble::before { transform: rotate(100deg) scale(1.06); border-color: var(--accent); }
.social-card--instagram { --accent: #ed91c3; }
.social-card--facebook { --accent: #87b6fc; }
.social-card--whatsapp { --accent: #88dba9; }
.social-card--instagram:hover .social-bubble, .social-card--instagram:focus-visible .social-bubble { transform: scale(1.16) rotate(14deg); }
.social-card--facebook:hover .social-bubble, .social-card--facebook:focus-visible .social-bubble { transform: scale(1.12) rotate(-12deg) translateY(-3px); }
.social-card--website:hover svg, .social-card--website:focus-visible svg { animation: social-orbit 5s linear infinite; }
.social-card-copy h2 { margin: 0 0 8px; font: 400 30px/1.1 var(--serif); letter-spacing: -.6px; }
.social-card-copy p { margin: 0; color: var(--mute); font-size: 11px; line-height: 1.8; max-width: 220px; }
.social-card-arrow { align-self: end; margin-bottom: 12px; font-size: 25px; color: var(--gold); transition: transform .4s var(--ease), color .4s; }
.social-card:hover .social-card-arrow, .social-card:focus-visible .social-card-arrow { transform: translate(4px,-4px); color: var(--accent); }
.social-burst { position: absolute; inset: 0; pointer-events: none; }
.social-burst i { --x: 0px; --y: -72px; position: absolute; left: calc(50% - 3px); top: calc(50% - 3px); width: 6px; height: 6px; background: var(--accent); border-radius: 50%; opacity: 0; }
.social-burst i:nth-child(2) { --x: 52px; --y: -52px; }
.social-burst i:nth-child(3) { --x: 72px; --y: 0px; }
.social-burst i:nth-child(4) { --x: 52px; --y: 52px; }
.social-burst i:nth-child(5) { --x: 0px; --y: 72px; }
.social-burst i:nth-child(6) { --x: -52px; --y: 52px; }
.social-burst i:nth-child(7) { --x: -72px; --y: 0px; }
.social-burst i:nth-child(8) { --x: -52px; --y: -52px; }
.social-card--whatsapp:hover .social-burst i, .social-card--whatsapp:focus-visible .social-burst i { animation: social-pop .8s var(--ease) both; }
.social-card--whatsapp:hover .social-bubble::before, .social-card--whatsapp:focus-visible .social-bubble::before { animation: social-pulse 1.3s ease-out 2; }
.social-note { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; color: var(--mute); font-size: 9px; line-height: 1.8; letter-spacing: 1.5px; }
.social-note b { color: var(--gold); font-weight: 400; padding-right: 8px; }
.social-status { min-height: 22px; color: var(--goldlight); font-size: 12px; line-height: 1.8; margin: 18px 0 0; }
.social-draft { margin: 0 0 24px; padding: 20px 24px; background: var(--panel); border: 1px solid var(--line); font-size: 12px; line-height: 1.8; color: var(--mute); }
.social-draft strong { display: block; color: var(--goldlight); font-weight: 600; }
.social-draft details { margin-top: 10px; }
.social-draft summary { cursor: pointer; color: var(--ink); }
.social-draft pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.social-draft button { padding: 0; margin-top: 14px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--gold); font-size: 11px; }
.social-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-block: 26px; font-size: 8px; letter-spacing: 1.5px; color: var(--mute); }
.social-footer a { color: var(--gold); }
@keyframes social-orbit { to { transform: rotate(360deg); } }
@keyframes social-pop { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) scale(.3); } }
@keyframes social-pulse { from { opacity: .8; transform: scale(.85); } to { opacity: 0; transform: scale(1.5); } }
.social-paused *, .social-paused *::before, .social-paused *::after { animation-play-state: paused !important; }
@media (max-width: 1000px) { .social-card { grid-template-columns: 80px 1fr 22px; gap: 20px; padding-inline: 24px; } .social-bubble { width: 76px; height: 76px; } .social-card-copy h2 { font-size: 27px; } .social-seal { margin-right: 5px; flex-basis: 154px; height: 154px; } }
@media (max-width: 720px) { .social-shell { width: calc(100% - 40px); } .social-header { padding-block: 22px; } .social-back { font-size: 8px; gap: 10px; letter-spacing: 1px; } .social-back span { width: 34px; height: 34px; } .social-main { padding: 44px 0 28px; } .social-main::before { inset-inline: -20px; } .social-intro { gap: 12px; margin-bottom: 30px; } .social-seal { display: none; } .social-title { font-size: clamp(39px, 7.8vw, 56px); letter-spacing: -1.6px; } .social-lead { font-size: 12px; } .social-kicker { font-size: 8px; letter-spacing: 2px; } .social-grid { grid-template-columns: 1fr; gap: 14px; } .social-card { min-height: 174px; grid-template-columns: 80px 1fr 22px; gap: 20px; padding: 43px 24px 24px; } .social-card-copy h2 { font-size: 28px; } .social-card-copy p { font-size: 11px; } .social-card-meta { top: 15px; font-size: 7px; } .social-note { display: block; font-size: 8px; } .social-note span { display: block; margin-bottom: 8px; } .social-footer { flex-wrap: wrap; font-size: 7px; line-height: 1.8; } }
@media (max-width: 360px) { .social-shell { width: calc(100% - 32px); } .social-header .brand-sub { font-size: 6px; } .social-back { gap: 6px; } .social-back span { width: 28px; height: 28px; } .social-card { grid-template-columns: 65px 1fr 17px; padding-inline: 18px; gap: 16px; } .social-bubble { width: 62px; height: 62px; } .social-card-copy h2 { font-size: 25px; } .social-card-meta { left: 18px; right: 18px; } }
@media (hover: none) { .social-card:active .social-bubble { transform: scale(1.08) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .social-page *, .social-page *::before, .social-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .social-card, .social-card .social-bubble, .social-card .social-bubble::before { transform: none !important; } }