:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #120617; color: #f9f5fa; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { min-width: 320px; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 58% 10%, rgba(111,14,110,.18), transparent 25%), #120617; } a { color: inherit; text-decoration: none; } button { font: inherit; }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; height: 71px; padding: 0 30px 0 23px; align-items: center; gap: 58px; border-bottom: 1px solid #3b153a; background: rgba(20,4,24,.97); }.brand { display: inline-flex; align-items: center; color: #fff; white-space: nowrap; }.official-logo { display: block; width: 225px; height: auto; }.topnav { display: flex; align-self: stretch; align-items: center; gap: 15px; }.topnav__item { display: inline-flex; height: 39px; padding: 0 20px; align-items: center; gap: 9px; color: #a99eaf; border: 1px solid transparent; border-radius: 999px; background: transparent; cursor: pointer; font-size: 16px; font-weight: 750; }.topnav__item span { color: #aaa1af; font-size: 20px; }.topnav__item.is-active { color: #fff; background: #ed3e97; box-shadow: 0 6px 19px rgba(235,52,147,.25); }.topnav__item.is-active span { color: #fff; }.top-actions { display: flex; margin-left: auto; align-items: center; gap: 14px; }.signup, .signin { display: inline-flex; min-height: 43px; padding: 0 19px; align-items: center; justify-content: center; border-radius: 999px; font-size: 14px; font-weight: 800; }.signup { background: linear-gradient(100deg, #f24a9f, #e0338e); box-shadow: 0 8px 20px rgba(238,47,142,.23); }.signin { border: 2px solid #ba2b79; color: #f5ddeb; }
.app-shell { display: flex; min-height: calc(100svh - 71px); }.sidebar { position: sticky; z-index: 10; top: 71px; display: flex; width: 89px; height: calc(100svh - 71px); flex: 0 0 89px; flex-direction: column; align-items: center; gap: 10px; padding: 29px 0 22px; border-right: 1px solid #32152f; background: rgba(14,3,19,.7); }.side-action { display: grid; width: 51px; height: 51px; place-items: center; color: #aaa1b4; border: 1px solid transparent; border-radius: 17px; font-size: 24px; transition: color .17s ease, border .17s ease, background .17s ease, transform .17s ease; }.side-action:hover { color: #f95aaf; transform: translateX(2px); }.side-action.is-active { color: #f33c9e; border-color: #4c214b; background: rgba(213,39,137,.1); }.side-action.accent { color: #ffa91d; font-size: 28px; }.side-action[aria-label="Idioma"] { font-size: 16px; }.side-divider { display: block; width: 100%; height: 1px; margin: 7px 0 3px; background: #2b1329; }
.page-content { width: min(calc(100% - 89px), 1814px); padding: 27px clamp(24px, 8.6vw, 168px) 50px; }.hero-banner { position: relative; display: grid; min-height: 301px; overflow: hidden; grid-template-columns: .96fr 1.04fr; border-radius: 29px; background: linear-gradient(104deg, #512045, #721354 51%, #271025); }.hero-banner::after { position: absolute; inset: 0; pointer-events: none; content: ""; background: linear-gradient(90deg, transparent 30%, rgba(37,5,35,.1) 48%, rgba(5,5,10,.27)); }.hero-photo { position: relative; min-height: 301px; overflow: hidden; }.hero-photo::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(26,4,29,.03), rgba(77,12,63,.08) 67%, #4c0e43); }.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 36%; mix-blend-mode: screen; opacity: .94; }.hero-copy { position: relative; z-index: 2; display: flex; padding: 35px 37px 31px; align-items: center; flex-direction: column; justify-content: center; text-align: center; }.hero-kicker { margin: 0 0 5px; color: #f17aac; font-size: 10px; font-weight: 900; letter-spacing: .15em; }.hero-copy h1, h2 { margin: 0; letter-spacing: -.055em; }.hero-copy h1 { font-size: clamp(32px, 2.7vw, 45px); line-height: 1.13; }.hero-copy h1 em, h2 em { color: #f39bc6; font-style: normal; }.hero-copy p:not(.hero-kicker) { max-width: 590px; margin: 25px 0 16px; color: #e2c7d8; font-size: clamp(13px, 1.05vw, 17px); font-weight: 600; line-height: 1.58; }.hero-cta { display: inline-flex; min-width: 284px; min-height: 58px; padding: 0 25px; align-items: center; justify-content: center; gap: 12px; color: #fff; border-radius: 999px; background: linear-gradient(105deg, #f2479d, #d92eb4); box-shadow: 0 13px 29px rgba(235,38,143,.24), inset 0 1px rgba(255,255,255,.26); font-size: 15px; font-weight: 900; letter-spacing: .04em; transition: transform .18s ease, filter .18s ease; }.hero-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }.hero-cta span { font-size: 24px; }
.hero-photo { isolation: isolate; background: radial-gradient(circle at 51% 32%, rgba(255,161,211,.63), transparent 25%), linear-gradient(100deg, #551c43, #ab1b76 55%, #48133f); }.hero-photo::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(12,4,17,.21), transparent 45%, rgba(49,4,44,.2)); }.hero-photo::after { z-index: 5; background: linear-gradient(90deg, rgba(26,4,29,.11), rgba(77,12,63,.02) 67%, #4c0e43); }.hero-photo .hero-person { position: absolute; bottom: -10px; z-index: 1; display: block; width: 42%; height: 112%; overflow: hidden; object-fit: cover; object-position: center top; mix-blend-mode: normal; opacity: 1; border-radius: 48% 48% 4% 4% / 22% 22% 3% 3%; box-shadow: 0 10px 30px rgba(14,1,15,.35); -webkit-mask-image: linear-gradient(to bottom, #000 0 77%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0 77%, transparent 100%); }.hero-person--one { left: 4%; filter: saturate(.9) contrast(1.04); }.hero-person--two { z-index: 2; left: 29%; width: 45%; height: 117%; filter: saturate(.92) contrast(1.04); }.hero-person--three { z-index: 3; left: 55%; width: 40%; filter: saturate(.86) contrast(1.04); }
.content-section { padding-top: 58px; }.section-heading { display: flex; margin-bottom: 19px; align-items: end; justify-content: space-between; gap: 25px; }.section-heading p, .start-panel p { margin: 0 0 7px; color: #ab668e; font-size: 10px; font-weight: 850; letter-spacing: .14em; }.section-heading h2 { font-size: clamp(30px, 2.4vw, 40px); line-height: 1.05; }.section-heading > a { color: #e99ac2; font-size: 13px; font-weight: 800; white-space: nowrap; }.section-heading > a span { padding-left: 5px; font-size: 19px; }.profile-rail { display: flex; overflow-x: auto; padding: 3px 0 16px; gap: 14px; scrollbar-color: #767377 #3f3a41; scrollbar-width: thin; }.profile-rail::-webkit-scrollbar { height: 10px; }.profile-rail::-webkit-scrollbar-track { border-radius: 99px; background: #3f3a41; }.profile-rail::-webkit-scrollbar-thumb { border-radius: 99px; background: #767377; }.profile-card { position: relative; width: min(17.2vw, 282px); min-width: 220px; aspect-ratio: .68; overflow: hidden; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: #301832; box-shadow: 0 12px 22px rgba(0,0,0,.12); }.profile-card::after { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 46%; content: ""; background: linear-gradient(transparent, rgba(0,0,0,.88)); }.profile-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }.profile-card:hover img { transform: scale(1.055); }.profile-card strong, .profile-card .status, .profile-tag { position: absolute; z-index: 2; left: 16px; }.profile-card strong { bottom: 15px; color: #fff; font-size: clamp(19px, 1.48vw, 29px); line-height: 1; letter-spacing: -.05em; }.profile-card strong small { color: #a9a5ab; font-size: .68em; }.profile-card .status { top: 14px; display: flex; padding: 5px 8px; align-items: center; gap: 5px; color: #f9f9fc; border-radius: 999px; background: rgba(10,8,15,.55); backdrop-filter: blur(5px); font-size: 9px; font-weight: 800; }.status i { width: 7px; height: 7px; border-radius: 50%; background: #10da75; box-shadow: 0 0 7px #10da75; }.profile-tag { bottom: 49px; color: #f9b5d7; font-size: 10px; font-weight: 700; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }.profile-card:hover .profile-tag { opacity: 1; transform: translateY(0); }
.explore-section { padding-top: 45px; }.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.explore-card { position: relative; display: flex; min-height: 162px; padding: 21px; overflow: hidden; align-items: start; gap: 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; transition: transform .2s ease, filter .2s ease; }.explore-card:hover { filter: brightness(1.1); transform: translateY(-3px); }.explore-card--violet { background: linear-gradient(135deg, #382450, #1c152c); }.explore-card--rose { background: linear-gradient(135deg, #63253f, #291327); }.explore-card--blue { background: linear-gradient(135deg, #233c58, #151c32); }.explore-icon { display: grid; width: 41px; height: 41px; flex: 0 0 auto; place-items: center; color: #fff0f8; border-radius: 14px; background: rgba(255,255,255,.13); font-size: 21px; }.explore-card b { display: block; padding-top: 3px; font-size: 15px; }.explore-card small { display: block; margin-top: 8px; color: #d6cbd5; font-size: 11px; line-height: 1.45; }.explore-card i { position: absolute; right: 19px; bottom: 17px; color: #f6b9d8; font-size: 21px; font-style: normal; }.start-panel { display: flex; margin-top: 61px; padding: 37px 41px; align-items: center; justify-content: space-between; gap: 32px; border: 1px solid rgba(242,117,183,.29); border-radius: 23px; background: radial-gradient(circle at 11% 14%, rgba(241,46,149,.26), transparent 35%), linear-gradient(100deg, #34112f, #1d112a); }.start-panel h2 { max-width: 520px; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.05; }.start-panel .hero-cta { min-width: 245px; }
footer { display: flex; padding: 39px 0 11px; align-items: center; gap: 28px; color: #857888; font-size: 11px; }.brand + span { margin-right: auto; } footer .official-logo { width: 154px; } footer div { display: flex; gap: 19px; } footer a:hover { color: #f4b2d7; }
@media (max-width: 1380px) { .page-content { padding-right: 64px; padding-left: 64px; }.hero-copy { padding-right: 22px; padding-left: 22px; }.profile-card { width: 20vw; }.topbar { gap: 32px; } }
@media (max-width: 980px) { .topbar { padding: 0 19px; gap: 19px; }.topnav__item { padding: 0 11px; font-size: 13px; }.top-actions { gap: 8px; }.signup, .signin { padding: 0 12px; font-size: 12px; }.sidebar { width: 66px; flex-basis: 66px; }.side-action { width: 44px; height: 44px; font-size: 20px; }.page-content { width: min(calc(100% - 66px), 1814px); padding: 22px 28px 40px; }.hero-banner { grid-template-columns: .9fr 1.1fr; }.profile-card { width: 27vw; }.explore-grid { grid-template-columns: 1fr; }.explore-card { min-height: 130px; } }
@media (max-width: 690px) { .topbar { height: 64px; }.official-logo { width: 184px; }.topnav { display: none; }.signin { display: none; }.signup { min-height: 38px; font-size: 11px; }.app-shell { min-height: calc(100svh - 64px); }.sidebar { position: fixed; z-index: 15; top: auto; bottom: 0; width: 100%; height: 65px; flex-direction: row; justify-content: space-around; gap: 0; padding: 7px 9px; border-top: 1px solid #32152f; border-right: 0; background: rgba(16,3,21,.96); }.side-action { width: 43px; height: 43px; font-size: 20px; }.side-action:nth-of-type(n+6), .side-divider { display: none; }.page-content { width: 100%; padding: 16px 16px 88px; }.hero-banner { min-height: 480px; grid-template-columns: 1fr; }.hero-photo { min-height: 218px; }.hero-photo::after { background: linear-gradient(180deg, transparent 28%, #3d163d); }.hero-copy { padding: 24px 20px 30px; justify-content: start; }.hero-copy p:not(.hero-kicker) { margin-top: 15px; }.hero-cta { min-width: 100%; min-height: 53px; }.content-section { padding-top: 41px; }.section-heading { align-items: start; }.section-heading h2 { font-size: 29px; }.section-heading > a { padding-top: 18px; }.profile-card { width: 57vw; min-width: 190px; }.explore-grid { gap: 11px; }.start-panel { padding: 26px 22px; flex-direction: column; align-items: stretch; }.start-panel .hero-cta { min-width: 100%; } footer { padding-bottom: 8px; flex-wrap: wrap; gap: 15px; } footer .brand + span { margin-right: 0; } footer div { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }