.hub { position: relative; min-height: 100svh; isolation: isolate; overflow: hidden; padding: 65px 0 44px; background-color: #f8eee3; background-image: radial-gradient(#d8b99530 1.1px, transparent 1.1px); background-size: 19px 19px; color: #442827; font-family: Georgia, 'Times New Roman', serif; }
.ambientOne { position: absolute; z-index: -1; width: 640px; height: 640px; top: -360px; right: -220px; border: 1px solid #d8b995; border-radius: 50%; box-shadow: 0 0 0 55px #f4e3d1, 0 0 0 56px #d8b995, 0 0 0 125px #f6e8d8, 0 0 0 126px #d8b995; opacity: .5; animation: drift 26s ease-in-out infinite; }
.ambientTwo { position: absolute; z-index: -1; width: 500px; height: 500px; left: -340px; bottom: -280px; border-radius: 50%; background: #edcfb7; filter: blur(2px); opacity: .45; animation: drift 32s ease-in-out infinite reverse; }
.content { width: min(530px, calc(100% - 40px)); margin: 0 auto; text-align: center; }

.logoWrap { position: relative; display: grid; place-items: center; width: 108px; height: 108px; margin: 0 auto 28px; border: 1px solid #c88d7d; border-radius: 50%; background: #fffaf4; box-shadow: 0 13px 38px #7a3c3020; animation: pop .7s cubic-bezier(.22,1,.36,1) both, bobbing 6s ease-in-out 1s infinite; }
.logoRing { position: absolute; inset: -13px; border: 1px dashed #c89a84; border-radius: 50%; animation: spin 24s linear infinite; }
.logo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.monogram { font-size: 60px; line-height: 1; font-style: italic; color: #9e544f; }
.sticker { position: absolute; padding: 7px 13px; border: 1px solid #c88d7d; border-radius: 999px; background: #fffaf4; box-shadow: 0 7px 16px #7a3c3022; color: #8d4a44; font: italic 13px/1 Georgia, serif; white-space: nowrap; }
.stickerOne { top: 2px; right: -92px; animation: pop .6s cubic-bezier(.22,1,.36,1) .45s both, bobTilt 5s ease-in-out 1.2s infinite; }
.stickerTwo { bottom: 4px; left: -84px; animation: pop .6s cubic-bezier(.22,1,.36,1) .6s both, bobTilt 5.6s ease-in-out 1.6s infinite reverse; }

.hero { position: relative; width: min(420px, 86vw); margin: 0 auto 30px; animation: rise .8s cubic-bezier(.22,1,.36,1) both; }
.hero::before { content: ''; position: absolute; inset: 10px; border: 1px dashed #c89a8488; border-radius: 20px; pointer-events: none; z-index: 1; }
.heroFrame { position: relative; overflow: hidden; border-radius: 26px; border: 1px solid #c88d7d; background: #fffaf4; box-shadow: 0 20px 46px #7a3c3026; animation: bobbing 7s ease-in-out 1.2s infinite; }
.heroImage { display: block; width: 100%; height: auto; }
.hero .stickerOne { top: 16px; right: -12px; }
.hero .stickerTwo { bottom: 22px; left: -14px; }

.eyebrow { margin: 0 0 14px; color: #9a6555; font: 700 11px/1.5 Arial, sans-serif; letter-spacing: .24em; animation: rise .7s cubic-bezier(.22,1,.36,1) .08s both; }
.content h1 { font-size: clamp(38px, 8vw, 57px); line-height: 1.03; letter-spacing: -.045em; font-weight: 500; margin: 0; text-wrap: balance; animation: rise .7s cubic-bezier(.22,1,.36,1) .16s both; }
.description { max-width: 410px; margin: 18px auto 0; color: #81675d; font: 16px/1.6 Arial, sans-serif; animation: rise .7s cubic-bezier(.22,1,.36,1) .24s both; }
.divider { display: flex; align-items: center; gap: 14px; margin: 31px auto 0; color: #ba8b73; animation: rise .7s cubic-bezier(.22,1,.36,1) .32s both; }
.divider::before, .divider::after { content: ''; height: 1px; flex: 1; background: #d9c5b3; }

.ribbon { position: relative; width: 108%; margin: 30px 0 34px -4%; padding: 12px 0; overflow: hidden; background: #4a2b22; color: #f6e6d4; transform: rotate(-1.2deg); animation: rise .7s cubic-bezier(.22,1,.36,1) .38s both; }
.ribbonTrack { display: flex; width: max-content; animation: marquee 24s linear infinite; }
.ribbonRun { display: flex; }
.ribbonRun span { display: flex; align-items: center; padding: 0 22px; font: 700 12px/1.6 Arial, sans-serif; letter-spacing: .17em; }
.ribbonRun span::after { content: ''; width: 6px; height: 6px; margin-left: 22px; border-radius: 50%; background: #d19a6a; }

.links { display: grid; gap: 13px; }
.link { position: relative; overflow: hidden; display: grid; grid-template-columns: 48px 1fr 25px; align-items: center; min-height: 75px; padding: 10px 17px; border: 1px solid #d7b9a6; border-radius: 16px; background: #fffaf5; box-shadow: 0 8px 20px #6f3a2810; color: #593c39; text-align: left; text-decoration: none; font: 700 16px/1.3 Arial, sans-serif; transition: transform .2s, box-shadow .2s, border-color .2s; animation: rise .7s cubic-bezier(.22,1,.36,1) calc(.44s + var(--i) * .09s) both; }
.link::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, #ffffff00 20%, #e9c9a955 50%, transparent); transform: translateX(0); }
.link:hover::after { animation: sheen .75s ease-out; }
.link:hover { transform: translateY(-3px); box-shadow: 0 15px 28px #6f3a2820; border-color: #a8665c; }
.link:focus-visible { outline: 3px solid #9e544f; outline-offset: 3px; }
.icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #9d524b; background: #f8e6da; transition: transform .22s; }
.link:hover .icon { transform: scale(1.09) rotate(-5deg); }
.arrow { color: #a87568; transition: transform .22s; }
.link:hover .arrow { transform: translate(3px, -3px); }

.gallery { margin: 42px 0 0; animation: rise .7s cubic-bezier(.22,1,.36,1) .72s both; }
.galleryTitle { margin: 0 0 20px; color: #9a6555; text-align: center; font: 700 11px/1.5 Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.strip { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.stripTrack { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.stripRun { display: flex; gap: 20px; padding-right: 20px; }
.photo { width: 168px; margin: 0; text-align: center; }
.photoFrame { display: grid; place-items: center; width: 168px; height: 168px; overflow: hidden; border: 5px solid #fffaf4; border-radius: 50%; background: #f2e0cf; box-shadow: 0 12px 26px #6f3a281f; transition: transform .25s; }
.photo:hover .photoFrame { transform: scale(1.04) rotate(1.5deg); }
.photoImage { width: 100%; height: 100%; object-fit: cover; }
.photoEmpty { display: grid; justify-items: center; gap: 7px; padding: 0 14px; color: #ad8168; }
.photoEmpty code { font: 10px/1.35 ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
.photo figcaption { margin-top: 12px; color: #8a6c5e; font: 600 13px/1.4 Arial, sans-serif; }

.closing { margin: 42px 0 0; color: #9b7668; font: italic 15px/1.5 Georgia, serif; animation: rise .7s cubic-bezier(.22,1,.36,1) .8s both; }
.footer { padding: 24px 20px 0; text-align: center; color: #ab8777; font: 11px/1.5 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; animation: rise .7s cubic-bezier(.22,1,.36,1) .86s both; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bobbing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes bobTilt { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(-1deg); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-16px, 14px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes sheen { from { transform: translateX(0); } to { transform: translateX(330%); } }

@media (max-width: 520px) {
  .hub { padding-top: 42px; }
  .link { min-height: 72px; }
  .stickerOne { top: -10px; right: -62px; }
  .stickerTwo { bottom: -12px; left: -56px; }
  .photo, .photoFrame { width: 140px; }
  .photoFrame { height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .hub *, .hub *::after { animation: none !important; opacity: 1; transform: none; }
  .link, .icon, .arrow, .photoFrame { transition: none; }
}

/* Hub compacto: sem adesivos ou elementos decorativos no fundo. */
.hub { min-height: auto; padding: 30px 0 24px; background-image: none; }
.ambientOne, .ambientTwo, .sticker, .eyebrow, .description, .divider, .closing, .galleryTitle { display: none; }
.content h1 { margin: 0 0 18px; font-size: clamp(34px, 8vw, 48px); }
.ribbon { width: 100%; margin: 0 0 20px; transform: none; }
.ribbonTrack, .stripTrack { will-change: transform; }
.ribbonRun, .stripRun { flex: 0 0 auto; }
.hero { width: min(360px, 84vw); margin: 0 auto 20px; }
.hero::before { display: none; }
.heroFrame { border-radius: 20px; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.link { display: grid; grid-template-columns: none; justify-items: center; gap: 7px; min-height: 0; padding: 0; border: 0; border-radius: 14px; background: transparent; box-shadow: none; overflow: visible; }
.link::after, .arrow { display: none; }
.link:hover { transform: translateY(-3px); box-shadow: none; border-color: transparent; }
.icon { width: 54px; height: 54px; border-radius: 50%; border: 1px solid #3a211a; background: #4a2b22; color: #f6e6d4; box-shadow: 0 8px 18px #6f3a2833; }
.icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Marcas oficiais sao glifos solidos, nao tracejados. */
.icon svg.brand { width: 23px; height: 23px; fill: currentColor; stroke: none; }
.linksTitle { margin: 0 0 14px; color: #9a6555; text-align: center; font: 700 11px/1.5 Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.linkName { color: #7a5347; font: 700 11px/1 Arial, sans-serif; letter-spacing: .05em; white-space: nowrap; }
.gallery { margin: 24px 0 0; }
.stripTrack { animation-duration: 32s; }
.stripRun { gap: 14px; padding-right: 14px; }
.photo { width: 132px; }
.photoFrame { width: 132px; height: 132px; }
.photo figcaption { margin-top: 8px; font-size: 12px; }
.footer { padding-top: 16px; }