/* FilaMundo: charcoal, turquoise, deep blue, warm gold and a red filament accent. */
:root {
  color-scheme: dark;
  --bg: #080c0f;
  --ink: #f2f3ef;
  --blue: #45c8dd;
  --muted: #adb8be;
  --line: #2b353c;
  --orange: #dfb16a;
  --gold: #dfb16a;
  --red: #d74343;
  --surface: #11191f;
  --surface-raised: #18242c;
  --deep-blue: #153f70;
}

body { background: var(--bg); }
::selection { background: #dfb16a; color: #080c0f; }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.announcement {
  background: linear-gradient(105deg, #102a3d, #102127 55%, #1e1b16);
  border-bottom: 1px solid #314b52;
  color: #d4e5e9;
}
.little-star { color: var(--gold); }
.announcement-end { color: #d9b77e; }
.header { position: relative; background: var(--bg); }
.header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 52px;
  right: 52px;
  height: 1px;
  background: linear-gradient(90deg, #1f9ab855, #d5a86044 65%, #c4363655);
  pointer-events: none;
}
.wordmark {
  color: var(--blue);
  text-shadow: 0 2px 20px #2696b518;
}
.wordmark > span { color: var(--gold); }
.wordmark small { color: #b4b9b9; text-shadow: none; }
.brand-mark {
  background: linear-gradient(145deg, #143b59, #0c1b28);
  color: var(--blue);
  border: 1px solid #32738a;
  box-shadow: 0 6px 16px #0006, inset 0 1px #ffffff12;
}
.brand-mark > span { color: var(--gold); }
.brand-mark img { background: #080c0f; }
/* Show the complete official artwork rather than the former square monogram.
   The viewport trims only transparent exterior margins of the supplied asset. */
.brand-logo {
  display: block;
  position: relative;
  width: 212px;
  aspect-ratio: 1689 / 738;
  flex-shrink: 0;
  overflow: hidden;
}
.brand-logo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-logo--official > img {
  position: absolute;
  width: 105.033%;
  max-width: none;
  height: auto;
  left: -3.552%;
  top: -12.195%;
}
.footer-main .brand-logo { width: 240px; max-width: 100%; }
nav a { color: #cbd1d4; }
nav a:hover { color: var(--gold); }
.eyebrow { color: #d7bc91; }
.status-dot { background: var(--red); box-shadow: 0 0 12px #d7434340; }
.blue-word {
  color: #45c8dd;
  background: linear-gradient(100deg, #64d9e6 10%, #309ccf 95%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blue-word svg { stroke: var(--red); }
.hero-copy > p { color: #b7c0c5; }
.hero-note strong { color: #deded7; }
.hero-photo > img {
  border: 1px solid #4db4c04a;
  box-shadow: 0 24px 65px #0008, 0 0 38px #32a2bd13;
}
.photo-tag {
  background: #0b151deb;
  color: #e6eced;
  border-color: #396473;
  box-shadow: 0 7px 20px #0005;
}
.photo-tag > span { color: var(--gold); }
.orbit-stamp {
  background: linear-gradient(140deg, #ebc48b, #bd843e);
  color: #211b13;
  border-color: var(--bg);
  box-shadow: 0 8px 24px #0006;
}
.image-caption, .catalog-meta { color: #a4afb6; }
.value-strip { background: #0d1419; border-color: #2a363d; }
.value-strip > .wrap { color: #c5cdd1; }
.value-strip i { color: var(--gold); }

/* Lifted surfaces remain still while being pressed or focused. */
.button {
  border-radius: 13px;
  box-shadow: 0 7px 0 #0004, 0 13px 27px #0006, inset 0 1px #ffffff36;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}
.primary, .cream {
  background: linear-gradient(125deg, #edc990 0%, #dfb16a 48%, #c08b44 100%);
  color: #19150e;
  border-color: #f0cc9099;
  font-weight: 700;
  box-shadow: 0 5px 0 #61421d, 0 15px 28px #0008, 0 0 21px #c9903d12, inset 0 1px #fff5;
}
.primary:hover, .cream:hover {
  background: linear-gradient(125deg, #f2d7ac, #e7bd7e 55%, #d29d55);
}
.nav-budget, .secondary {
  color: #d6f5f7;
  background: linear-gradient(135deg, #182f3e, #12212c);
  border-color: #3b7a8d;
  box-shadow: 0 5px 0 #050a10, 0 11px 22px #0008, inset 0 1px #91e5f320;
}
.count { background: var(--gold); color: #18150f; font-weight: 700; }
.account-nav {
  border: 1px solid #33434d;
  border-radius: 11px;
  background: #111b22;
  padding: 11px 12px;
  color: #dbe5e8;
  box-shadow: 0 5px 13px #0005, inset 0 1px #ffffff0c;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.account-nav svg { color: var(--blue); }
.account-nav:hover { color: var(--gold); border-color: var(--blue); }
.text-button { color: #d5dfe3; transition: transform .22s ease, color .22s ease; }
.text-button:hover { color: var(--gold); }
.button > span[aria-hidden], .product-add > span {
  transition: transform .22s ease;
}
.hero-actions > .primary, .custom-copy > .primary, .contact-content > .cream {
  animation: fm-float 4.8s ease-in-out infinite;
}
.custom-copy > .primary { animation-delay: -.9s; }
.contact-content > .cream { animation-delay: -1.8s; }
.nav-budget { animation: fm-header-float 5.4s ease-in-out infinite; }
@keyframes fm-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes fm-header-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@media (hover:hover) and (pointer:fine) {
  .button:hover, .account-nav:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 0 #0005, 0 20px 34px #0008, 0 0 24px #45c8dd19, inset 0 1px #ffffff3b;
  }
  .primary:hover, .cream:hover {
    box-shadow: 0 8px 0 #61421d, 0 20px 34px #0008, 0 0 28px #dfb16a20, inset 0 1px #fff6;
  }
  .button:hover > span[aria-hidden] { transform: translate(2px,-2px); }
  .text-button:hover { transform: translateX(3px); }
}
.button:is(:hover,:focus-visible,:active), .product-add:is(:hover,:focus-visible) { animation-play-state: paused; }
.button:active, .product-add:active, .account-nav:active {
  transform: translateY(2px) scale(.985);
  translate: none;
  box-shadow: 0 2px 0 #0005, 0 5px 12px #0006, inset 0 1px #ffffff20;
}
button:disabled, .button:disabled {
  animation: none;
  translate: none;
  transform: none;
  opacity: .58;
  cursor: not-allowed;
}

.filter { background: #11191f; border-color: #35414a; color: #c4ced4; transition: background .2s, border-color .2s, color .2s; }
.filter[aria-pressed=true] { background: var(--gold); border-color: #efc78c; color: #211a11; }
.filter:hover { border-color: var(--blue); color: #f1e5cc; }
.filter[aria-pressed=true]:hover { color: #211a11; }
.search { border-color: #41545e; }
.search svg { stroke: var(--blue); }
.search input { color: var(--ink); background: transparent; }
.product-card { background: #11191f; border-color: #2d3b43; box-shadow: 0 8px 22px #0003; }
.product-card:hover { border-color: #43717c; box-shadow: 0 20px 32px #0007, 0 0 22px #45c8dd0b; }
.product-image { background: radial-gradient(ellipse at 50% 25%, #203941, #14232b 68%, #10191f); }
.product-badge { background: #0a131be8; color: #e5c690; border: 1px solid #4f5149; }
.view-detail { background: #0e202be6; color: var(--blue); border: 1px solid #3d7785; }
.product-category { color: #d8b47c; }
.product-info h3 { color: #eff1ed; }
.product-bottom { border-color: #2b373e; align-items: center; }
.product-add {
  color: #91e2eb;
  background: linear-gradient(130deg, #153847, #122935);
  padding: 9px 11px;
  border: 1px solid #3b6d7c;
  border-radius: 9px;
  box-shadow: 0 4px 0 #050c13, 0 7px 12px #0004, inset 0 1px #ffffff12;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.product-add:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 6px 0 #050c13, 0 13px 19px #0007; }
.catalog-footnote { color: #a0adb5; }
.custom-section { background: #11191f; border: 1px solid #3b3b32; box-shadow: 0 15px 38px #0004; }
.custom-art { background: linear-gradient(140deg, #12303c, #101a20 80%); }
.grid-paper { background-image: linear-gradient(#76bdcd14 1px,transparent 1px),linear-gradient(90deg,#76bdcd14 1px,transparent 1px); }
.art-label, .art-caption { color: #bbd4da; }
.custom-copy > p { color: #b7c1c6; }
.custom-copy small { color: #a7b2b9; }
.custom-tags span { border-color: #44504e; color: #ddc69e; background: #24231b; }
.step-number { color: var(--gold); border-color: #334047; }
.contact-section {
  background: radial-gradient(ellipse at 85% 80%, #153747, transparent 65%),linear-gradient(120deg,#0d2334,#131d25 65%,#282116);
  border-top: 1px solid #4d573e;
  border-bottom: 1px solid #344653;
}
.contact-content .eyebrow { color: #d9be94; }
.contact-spark { color: #54c6d711; }
.footer-bottom { color: #a3afb7; }
.footer-bottom > button { color: #c8b594; }
.socials a { color: var(--gold); }
.skip { background: var(--gold); color: #15120d; }

dialog { background: #11191f; border: 1px solid #394a54; box-shadow: 0 30px 100px #000b,0 0 50px #1b859c12; }
dialog::backdrop { background: #02070bcc; backdrop-filter: blur(7px); }
.dialog-header { background: #121e26; border-bottom-color: #34414a; }
.icon-button, .close-dialog { background: #1b2b35; color: #dce7eb; border-color: #475d69; box-shadow: 0 4px 9px #0004; }
.icon-button:hover { background: #254553; border-color: var(--blue); }
.budget-empty { background: #14242a; border-color: #4c6f77; color: #b6c5cd; }
.budget-thumb { background: #20333c; }
.qty-control { border-color: #475761; background: #10191f; }
.qty-control button { background: #20333d; color: #e2e9e9; }
.qty-control button:hover:not(:disabled) { background: #2e525e; }
.budget-row .remove-item, .custom-idea-row button, .danger { color: #ef9890; }
.add-idea { background: #122b37; color: #84d9e6; border-color: #488397; transition: background .2s, box-shadow .2s; }
.add-idea:hover { background: #1a3b48; box-shadow: 0 7px 20px #0004; }
input, textarea, select { color-scheme: dark; background: #0b1217; color: #eef1ed; border-color: #42525c; }
input::placeholder, textarea::placeholder { color: #99a8b1; opacity: 1; }
input:hover, textarea:hover, select:hover { border-color: #5a7985; }
.optional, .privacy-note { color: #a4b2ba; }
.detail-image { background: radial-gradient(ellipse at 50% 35%,#27434b,#101b22 80%); }
.detail-copy small { color: #afbac1; }
.toast { background: #1b3a46; color: #ecf3f3; border: 1px solid #4b8898; box-shadow: 0 12px 30px #0009; }
.editor-info { background: #172b38; color: #c3d6df; border: 1px solid #385b6d; }
.custom-idea-row { background: #1a2a31; border: 1px solid #344a52; }
input[type=file]::file-selector-button { color: #e6d1aa; background: #27353b; border: 1px solid #4b616b; border-radius: 5px; padding: 6px 8px; margin-right: 10px; }

.account-symbol { background: #183442; color: #7addE9; border: 1px solid #3b6a7b; box-shadow: 0 8px 20px #0004; }
.account-benefits { background: #17262c; color: #d3e0e4; border: 1px solid #344a52; }
.account-benefits b { color: var(--gold); }
.account-form input[readonly] { background: #1b242b; color: #b6c2c9; }
.account-footnote, .account-form small, .account-help, .account-mini-label { color: #b0bbc1; }
.account-footnote a, .account-signout { color: var(--gold); }
.account-error { color: #ffc1b9; background: #3b1d22; border: 1px solid #84484d; }
.account-success { color: #afe8de; background: #183331; border: 1px solid #3a726e; }
.account-status { background: #173432; color: #b9e6db; border: 1px solid #326b63; }
.account-status::before { background: #77d1b3; }
.account-avatar { background: linear-gradient(140deg,#1e7799,#16495e); color: #e3f6f8; border: 1px solid #58a6b6; box-shadow: 0 6px 15px #0005; }

@media(max-width:1100px) { .header::after { left:32px;right:32px; } .product-add { padding:8px;gap:6px; } }
@media(max-width:560px) {
  .header .brand-logo { width:164px; }
  .header::after { left:20px;right:20px; }
  .account-nav { padding:7px 0; }
  .product-bottom { align-items:start;gap:7px; }
  .product-add { padding:9px 7px;min-height:35px; }
  .hero-actions > .primary, .custom-copy > .primary, .contact-content > .cream { animation-duration:5.4s; }
  .nav-budget { animation:none; }
}
@media(max-width:390px) { .header .brand-logo { width:152px; } }
@media(max-width:360px) { .header::after { left:15px;right:15px; } .product-add { padding-inline:6px; } .header .brand-logo { width:140px; } }
@media(prefers-reduced-motion:reduce) {
  .button, .account-nav, .product-add, .text-button, .product-card { animation:none!important;transition:none!important;translate:none!important; }
  .button:hover, .account-nav:hover, .product-add:hover, .text-button:hover, .product-card:hover { transform:none!important; }
}

.publication-description{white-space:pre-wrap;overflow-wrap:anywhere}.publication-placeholder{display:grid;place-items:center;width:100%;height:100%;min-height:240px;font-size:64px;color:var(--gold)}#raffle-publications[hidden],#raffle-empty[hidden]{display:none!important}