@font-face {
  font-family: Outfit;
  src: url('../fonts/outfit-light.ttf') format('truetype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: Outfit;
  src: url('../fonts/outfit-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --paper: #050505;
  --ink: #c7c5cc;
  --muted: #8f8d97;
  --line: #28272c;
  --iridescent: linear-gradient(110deg, #8cecff, #a9b4ff 30%, #e8b6f1 57%, #f4d8cd 77%, #d9fff0);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  font-family: Outfit, sans-serif;
  font-weight: 300;
  background: var(--paper);
  color: var(--ink);
  scrollbar-color: #5e5b63 var(--paper);
  scrollbar-width: thin;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background: var(--paper); }
body.fhelier-soon { font-family: Outfit, sans-serif; font-weight: 300; color: var(--ink); }
::selection { color: #050505; background: #d9c8e9; }
a { color: inherit; text-underline-offset: .3em; }
a:focus-visible, button:focus-visible { outline: 2px solid #d9c8e9; outline-offset: 7px; }
img { display: block; max-width: 100%; height: auto; }
p, h1, h2 { margin: 0; }
.screen-reader-text, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; z-index: 10; top: 16px; left: 16px; padding: 14px 20px; color: var(--paper); background: var(--ink); font-weight: 400; }
.site-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; max-width: 1920px; margin: 0 auto; position: relative; z-index: 1; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 32px 4.5vw; color: var(--muted); font-size: 12px; line-height: 1.5; letter-spacing: .035em; }
.header-domain { font-weight: 400; }
.coming-soon { display: grid; place-items: center; position: relative; isolation: isolate; flex: 1; padding: 58px 24px 76px; overflow: hidden; overflow: clip; }
.coming-soon:focus { outline: none; }
.signature { --signature-copy-size: clamp(21px, 2.2vw, 30px); width: min(100%, 850px); text-align: center; position: relative; z-index: 1; }
.brand-heading { display: flex; flex-direction: column; align-items: center; font-weight: 300; }
.brand-intro { display: block; font-size: var(--signature-copy-size); line-height: 1.35; letter-spacing: -.02em; margin-bottom: 30px; color: #96949e; }
.brand-emblem { display: block; position: relative; width: min(76%, 500px); }
.brand-logo { width: 100%; filter: invert(1); }
.screen-sparkles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sparkle-definitions { position: absolute; width: 0; height: 0; }
.sky-star { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); fill: url(#fhelier-spark-iridescent); opacity: .5; overflow: visible; }
.logo-luster { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url('../images/fhelier-logo.png') center / 100% 100% no-repeat; mask: url('../images/fhelier-logo.png') center / 100% 100% no-repeat; }
.logo-luster::after { content: ''; position: absolute; inset: -25% -40%; opacity: 0; background: linear-gradient(110deg, transparent 35%, rgba(140,236,255,.7) 43%, rgba(201,179,255,.92) 48%, #fff6fc 51%, rgba(245,196,222,.85) 55%, rgba(211,255,239,.5) 59%, transparent 65%); transform: translateX(-75%); }
.logo-sparkles { position: absolute; inset: 0; pointer-events: none; }
.logo-spark { position: absolute; width: 8px; height: 8px; fill: url(#fhelier-spark-iridescent); opacity: .5; }
.logo-spark:nth-child(1) { left: 4%; top: 64%; --delay: 0s; --dx: -8px; --dy: -6px; }
.logo-spark:nth-child(2) { left: 24%; top: 94%; width: 5px; height: 5px; --delay: -2.057s; --dx: -4px; --dy: 8px; }
.logo-spark:nth-child(3) { left: 49%; top: 2%; width: 7px; height: 7px; --delay: -4.114s; --dx: 2px; --dy: -11px; }
.logo-spark:nth-child(4) { left: 66%; top: 61%; width: 6px; height: 6px; --delay: -1.371s; --dx: 5px; --dy: -8px; }
.logo-spark:nth-child(5) { left: 96%; top: 91%; --delay: -3.429s; --dx: 9px; --dy: 4px; }
.logo-spark:nth-child(6) { left: 41%; top: 28%; width: 5px; height: 5px; --delay: -.686s; --dx: -6px; --dy: -9px; }
.logo-spark:nth-child(7) { left: 81%; top: 72%; width: 5px; height: 5px; --delay: -2.743s; --dx: 7px; --dy: -5px; }
.brand-tagline { margin: 30px auto 0; max-width: 780px; font-size: var(--signature-copy-size); font-weight: 300; line-height: 1.2; letter-spacing: -.035em; color: #b5b2bd; text-wrap: balance; }
.announcement { margin-top: 38px; }
.signature-rule { display: block; width: 40px; height: 1px; margin: 0 auto 28px; background: var(--iridescent); }
.announcement h2 { font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: .19em; line-height: 1.5; color: #aba8b3; overflow-wrap: anywhere; }
.announcement-copy { max-width: 37ch; margin: 14px auto 0; color: var(--muted); font-size: 16px; line-height: 1.6; text-wrap: pretty; overflow-wrap: anywhere; }
.instagram-link { display: inline-flex; justify-content: center; align-items: center; gap: 20px; min-height: 48px; padding: 10px 0; margin-top: 22px; border-bottom: 1px solid #74717a; font-size: 14px; font-weight: 400; line-height: 1.5; text-decoration: none; }
.instagram-link svg { flex-shrink: 0; transition: transform 200ms var(--ease-out); }
.instagram-link:active { opacity: .75; }
.light-study { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.light-orbit { position: absolute; width: min(1050px, 112vw); height: 420px; top: 45%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%) rotate(-22deg); }
.light-orbit-primary { padding: 1px; background: conic-gradient(from 65deg, transparent 0deg, #c0c8f5 28deg, #e9c3dc 55deg, transparent 98deg, transparent 170deg, #98cddd 198deg, #c4b1e6 225deg, transparent 264deg, transparent 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: .65; }
.light-orbit-secondary { width: min(1072px, 115vw); height: 436px; border: 1px solid #202026; opacity: .5; }
.light-point { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #cdd5e8; opacity: .7; }
.light-point-one { top: 24%; left: 18%; }
.light-point-two { bottom: 22%; right: 14%; width: 2px; height: 2px; opacity: .5; }
.site-footer { padding: 0 4.5vw 18px; }
.footer-info { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 54px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.5; letter-spacing: .035em; }
.contact-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; overflow-wrap: anywhere; }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--muted); font: inherit; letter-spacing: 0; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:active { opacity: .7; }
.powered-by { display: flex; align-items: center; justify-content: center; gap: 9px; width: fit-content; min-height: 44px; margin: 5px auto 0; font-size: 10px; line-height: 1.4; color: var(--muted); text-decoration: none; }
.powered-by img { width: 110px; }
@media (hover: hover) and (pointer: fine) {
  .instagram-link:hover { border-bottom-color: #e5cbe3; }
  .instagram-link:hover svg { transform: translate(2px, -2px); }
  .contact-link:hover { color: var(--ink); text-decoration: underline; }
  .powered-by:hover span { color: var(--ink); }
  .motion-toggle:hover { color: var(--ink); }
}
/* Un solo gesto de apertura, siempre legible y sin bloqueo de carga. */
@media (prefers-reduced-motion: no-preference) {
  .brand-heading { animation: signature-arrive 1100ms var(--ease-out) both; }
  .brand-tagline { animation: signature-arrive 1100ms var(--ease-out) 60ms both; }
  .light-study { animation: light-arrive 1600ms var(--ease-out) both; }
  .has-sparkle-motion .sky-star { animation: sky-shimmer var(--duration) cubic-bezier(.77, 0, .175, 1) var(--delay) infinite; }
  .has-sparkle-motion .logo-spark { animation: logo-shimmer 4.8s linear var(--delay) infinite; }
  .has-sparkle-motion .logo-luster::after { animation: logo-iridescent 5.6s linear -1.4s infinite; }
  .sparkles-paused .sky-star, .sparkles-paused .logo-spark, .sparkles-paused .logo-luster::after { animation-play-state: paused; }
}
@keyframes sky-shimmer {
  0%, 8% { opacity: 0; transform: scale(.72); }
  28%, 48% { opacity: 1; transform: scale(1.3); }
  76%, 100% { opacity: 0; transform: scale(.82); }
}
@keyframes logo-shimmer {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  18%, 30% { opacity: .78; transform: translate(0, 0) scale(1.05); }
  74%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.55); }
}
@keyframes logo-iridescent {
  0% { transform: translateX(-43%); opacity: 0; }
  12% { opacity: .55; }
  88% { opacity: .55; }
  100% { transform: translateX(43%); opacity: 0; }
}
@keyframes signature-arrive {
  from { opacity: .72; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes light-arrive {
  from { opacity: .2; transform: scale(.97); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .instagram-link svg { transition: none; }
  .instagram-link:hover svg { transform: none; }
}
@media (min-width: 1600px) {
  .coming-soon { padding-top: 80px; padding-bottom: 100px; }
  .brand-emblem { width: 560px; }
  .light-orbit { width: 1220px; height: 490px; }
  .light-orbit-secondary { width: 1242px; height: 506px; }
}
@media (max-width: 600px) {
  .site-header { padding: 22px 24px; font-size: 10px; gap: 12px; }
  .coming-soon { padding: 42px 24px 54px; }
  .signature { --signature-copy-size: 22px; }
  .brand-intro { margin-bottom: 27px; }
  .brand-emblem { width: 82%; max-width: 330px; }
  .brand-tagline { max-width: 320px; margin-top: 30px; line-height: 1.22; }
  .announcement { margin-top: 32px; }
  .signature-rule { margin-bottom: 26px; width: 32px; }
  .announcement h2 { font-size: 12px; }
  .announcement-copy { max-width: 29ch; font-size: 15px; }
  .instagram-link { margin-top: 18px; }
  .light-orbit { width: 640px; height: 300px; top: 35%; transform: translate(-50%, -50%) rotate(-35deg); }
  .light-orbit-secondary { width: 654px; height: 314px; }
  .light-orbit-primary { opacity: .45; }
  .light-point-one { left: 8%; top: 11%; }
  .light-point-two { right: 8%; bottom: 15%; }
  .site-footer { padding: 0 24px 14px; }
  .footer-info { font-size: 10px; letter-spacing: 0; gap: 12px; flex-wrap: wrap; }
  .powered-by { margin-top: 2px; }
  .powered-by img { width: 100px; }
}
@media (max-width: 350px) {
  .site-header { padding-inline: 18px; }
  .coming-soon { padding-inline: 20px; }
  .footer-info { flex-direction: column; justify-content: center; gap: 0; padding-top: 14px; }
}
@media (max-height: 740px) and (min-width: 601px) {
  .site-header { padding-block: 18px; }
  .coming-soon { padding-block: 24px 38px; }
  .brand-emblem { width: 380px; }
  .signature { --signature-copy-size: 24px; }
  .brand-intro { margin-bottom: 20px; }
  .brand-tagline { margin-top: 22px; }
  .announcement { margin-top: 24px; }
  .signature-rule { margin-bottom: 20px; }
}
@media (forced-colors: active) {
  .light-study, .signature-rule, .screen-sparkles, .logo-sparkles, .logo-luster { display: none; }
  .brand-logo, .powered-by img { forced-color-adjust: none; }
  .instagram-link { border-color: LinkText; }
}