/* ========================================================================== O LIVRO AMARELO — MISSÃO 2026 Sistema visual: códice iluminado · ouro sobre umbra · gravura incunábula ========================================================================== */ :root{ /* --- tinta --- */ --ink-900:#050403; --ink-800:#080705; --ink-700:#0D0B08; --ink-600:#120F0B; --ink-500:#1A1610; --ink-400:#282218; /* --- ouro --- */ --gold-900:#6B5218; --gold-700:#96762A; --gold-500:#C9A227; --gold-400:#DFBB4E; --gold-300:#E9CE7A; --gold-200:#F2E3B3; /* --- pergaminho --- */ --paper:#EDE3D0; --paper-dim:#C9BCA3; --paper-mute:#9A8D77; /* --- acento --- */ --crimson:#7E1F17; --crimson-lt:#A63428; /* --- tipografia --- */ --f-display:'Cinzel', 'Trajan Pro', Georgia, serif; --f-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif; --f-text:'Spectral', Georgia, serif; /* --- métrica --- */ --wrap:1180px; --wrap-narrow:760px; --r:2px; --ease:cubic-bezier(.2,.7,.3,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth; scroll-padding-top:72px; -webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:#050403; /* Preto Obsidiana profundo e elegante */ color:var(--paper); font-family:var(--f-text); font-weight:300; font-size:clamp(1.05rem,1rem + .3vw,1.18rem); line-height:1.8; letter-spacing:.005em; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{max-width:100%; height:auto; display:block} ::selection{background:var(--gold-500); color:var(--ink-900)} :focus-visible{outline:2px solid var(--gold-400); outline-offset:3px; border-radius:var(--r)} .skip{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--gold-500); color:var(--ink-900); padding:.8rem 1.4rem; font-family:var(--f-display); font-size:.8rem; letter-spacing:.12em; } .skip:focus{left:1rem; top:1rem} /* ---------- textura de grão ---------- */ .grain{ position:fixed; inset:0; z-index:400; pointer-events:none; background-image:url('../img/grain.png'); background-size:180px 180px; opacity:.4; mix-blend-mode:overlay; } /* ========================================================================== AMBIENTE DE FUNDO — poeira dourada, luz de altar, moldura de página ========================================================================== */ .bg-dust,.bg-light,.bg-vignette{position:fixed; inset:0; z-index:-1; pointer-events:none} .bg-dust{opacity:.9} .bg-light{ background: radial-gradient(70% 55% at 50% 30%, rgba(201,162,39,.08) 0%, rgba(150,118,42,.03) 40%, transparent 72%), radial-gradient(120% 80% at 50% -10%, rgba(233,206,122,.12) 0%, rgba(201,162,39,.05) 28%, transparent 60%), radial-gradient(100% 70% at 50% 112%, rgba(126,95,28,.09) 0%, transparent 62%); } .bg-vignette{ box-shadow:inset 0 0 clamp(80px,14vw,220px) clamp(30px,6vw,90px) rgba(0,0,0,.85); } .bg-vignette::before{ content:''; position:absolute; inset:clamp(10px,1.6vw,22px); border:1px solid rgba(201,162,39,.08); box-shadow:0 0 0 1px rgba(201,162,39,.03) inset; } @media (max-width:640px){ .bg-vignette::before{inset:8px} } /* ========================================================================== TELA DE CARREGAMENTO — brasão iluminado, poeira e fio de ouro (base em #loader vem do CSS crítico inline no ) ========================================================================== */ .loader__stage{ position:relative; display:flex; flex-direction:column; align-items:center; padding:0 2rem; text-align:center; max-width:600px; } /* auréola de luz radiante pulsando atrás da logo da onça */ .loader__halo{ position:absolute; z-index:0; top:-20%; left:50%; transform:translateX(-50%); width:min(70vw,360px); aspect-ratio:1/1; background:radial-gradient(circle, rgba(247,206,91,.22) 0%, rgba(201,162,39,.08) 42%, transparent 70%); animation:loaderHalo 3.4s var(--ease) infinite; } /* logo da onça (mesmo ícone do menu superior) — elegante, refinada e discreta */ .loader__mark{ position:relative; z-index:1; width:clamp(68px,10vw,92px); height:clamp(68px,10vw,92px); -webkit-mask-image:url('../img/onca-logo.png'); mask-image:url('../img/onca-logo.png'); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; background:linear-gradient(160deg, #ffe89c 0%, #f7ce5b 35%, #d4a327 68%, #a67c17 100%); filter:drop-shadow(0 0 16px rgba(247,206,91,.5)) drop-shadow(0 4px 14px rgba(0,0,0,.85)); animation:loaderMark 1s var(--ease) both; } .loader__eyebrow{ margin-top:1.1rem; z-index:1; font-family:var(--f-display); font-size:clamp(.55rem,1.1vw,.66rem); letter-spacing:.38em; text-transform:uppercase; color:var(--gold-400); animation:loaderWord 1.1s var(--ease) .08s both; } .loader__word{ margin:.4rem 0 0; z-index:1; font-family:var(--f-display); font-weight:700; font-size:clamp(2.2rem,6.5vw,3.8rem); letter-spacing:.12em; text-transform:uppercase; line-height:1.05; background:linear-gradient(168deg, #fff5d6 0%, #fadb73 35%, #dfb53b 65%, #c9961a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 20px rgba(0,0,0,.85)); animation:loaderWord 1.1s var(--ease) .16s both; } .loader__tag{ margin-top:.4rem; z-index:1; font-family:var(--f-serif); font-style:italic; font-weight:300; font-size:clamp(1rem,2.4vw,1.35rem); letter-spacing:.04em; color:var(--paper-dim); animation:loaderWord 1.1s var(--ease) .24s both; } /* contador romano iluminado */ .loader__count{ margin-top:1.8rem; z-index:1; font-family:var(--f-display); font-weight:600; font-size:clamp(1.5rem,4.5vw,2.4rem); line-height:1; letter-spacing:.22em; text-indent:.22em; min-width:6ch; text-align:center; font-variant-numeric:tabular-nums; color:var(--gold-300); filter:drop-shadow(0 0 10px rgba(247,206,91,.4)); animation:loaderWord 1.1s var(--ease) .3s both; } /* fio de ouro radiante de progresso */ .loader__bar{ position:relative; z-index:1; margin-top:1.2rem; width:min(72vw,420px); height:2px; overflow:hidden; background:rgba(201,162,39,.18); border-radius:2px; } .loader__bar i{ position:absolute; inset:0; display:block; transform-origin:left center; transform:scaleX(0); background:linear-gradient(90deg,var(--gold-700),var(--gold-300),var(--gold-200)); box-shadow:0 0 12px rgba(247,206,91,.7); } .loader__label{ margin-top:1rem; z-index:1; font-family:var(--f-display); font-weight:600; font-size:clamp(.62rem,1.2vw,.72rem); letter-spacing:.4em; text-indent:.4em; text-transform:uppercase; color:var(--paper-mute); animation:loaderWord 1.1s var(--ease) .42s both; } @keyframes loaderHalo{ 0%,100%{opacity:.6; transform:translateX(-50%) scale(.94)} 50%{opacity:1; transform:translateX(-50%) scale(1.06)} } @keyframes loaderShimmer{ 0%{background-position:120% 0} 100%{background-position:-120% 0} } @keyframes loaderMark{ from{opacity:0; transform:translateY(14px) scale(.96)} to{opacity:1; transform:none} } @keyframes loaderWord{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} } @keyframes loaderBar{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} } /* segurança pura-CSS: se o JS falhar, some sozinha */ .loader:not(.is-done){ animation:loaderSafety .9s ease 6.5s forwards; } @keyframes loaderSafety{ to{opacity:0; visibility:hidden} } @media (prefers-reduced-motion:reduce){ .loader__halo,.loader__mark,.loader__word,.loader__tag,.loader__bar i,.loader__count,.loader__label{ animation:none } .loader__mark{ background-position:48% 0 } } /* ---------- barra de progresso ---------- */ .progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:300; background:rgba(201,162,39,.1); } .progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-900),var(--gold-400) 55%,var(--gold-200)); box-shadow:0 0 12px rgba(223,187,78,.6); transition:width .1s linear; } /* ========================================================================== UTILITÁRIO — GRAVURA EM OURO ========================================================================== */ .engraving{ display:block; background:linear-gradient(155deg,#6e5623 0%,#997a34 48%,#b08e40 62%,#5f4a18 100%); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .nav__mark {-webkit-mask-image:url('../img/onca-logo.png'); mask-image:url('../img/onca-logo.png')} .hero__crest{-webkit-mask-image:url('../img/logo-missao-thin.png'); mask-image:url('../img/logo-missao-thin.png')} .call__beast{-webkit-mask-image:url('../img/onca-bestiario.png'); mask-image:url('../img/onca-bestiario.png')} .foot__mark {-webkit-mask-image:url('../img/logo-missao-thin.png'); mask-image:url('../img/logo-missao-thin.png')} /* ========================================================================== NAVEGAÇÃO (MENU SUPERIOR PERFEITAMENTE ALINHADO EM 1 LINHA) ========================================================================== */ .nav{ position:fixed; top:0; left:0; right:0; z-index:200; height:72px; display:flex; align-items:center; transform:translateY(-100%); opacity:0; pointer-events:none; transition:transform .5s cubic-bezier(0.16, 1, 0.3, 1), opacity .4s var(--ease), background .45s var(--ease); border-bottom:1px solid rgba(201,162,39,.18); background:rgba(12, 9, 6, 0.68); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); } .nav::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent 0%, rgba(201,162,39,.6) 20%, rgba(247,206,91,.9) 50%, rgba(201,162,39,.6) 80%, transparent 100%); pointer-events:none; z-index:201; box-shadow:0 0 10px rgba(247,206,91,.4); opacity:0; transition:opacity .4s var(--ease); } .nav.is-stuck, .nav.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; background:rgba(12, 9, 6, 0.76); box-shadow:0 8px 32px rgba(0,0,0,.5); } .nav.is-stuck::after, .nav.is-open::after{ opacity:1; } .nav__in{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 clamp(1rem,3vw,1.5rem); display:flex; align-items:center; justify-content:space-between; height:100%; } .nav__brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; transition:transform .3s var(--ease); } .nav__brand:hover{transform:translateY(-1px)} .nav__mark{width:36px; height:36px; flex-shrink:0} .nav__word{ font-family:var(--f-display); font-weight:600; font-size:.9rem; line-height:1.1; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-300); display:flex; flex-direction:column; justify-content:center; } .nav__word em{ font-family:var(--f-serif); font-style:italic; font-weight:400; font-size:.82rem; letter-spacing:.04em; text-transform:none; color:var(--paper-mute); } .sec-divider{ display: flex; justify-content: center; align-items: center; gap: 1.2rem; padding: 3rem 1rem 1.5rem; max-width: 680px; margin: 0 auto; width: 100%; } .sec-divider__line{ flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,162,39,.45), transparent); } .sec-divider__gem{ font-size: 1.1rem; color: var(--gold-400); filter: drop-shadow(0 0 10px rgba(247,206,91,.5)); user-select: none; } .nav__links{ display:flex; align-items:center; gap:clamp(0.5rem, 1.3vw, 1.4rem); margin-left:auto; flex-wrap:nowrap; white-space:nowrap; height:100%; } .nav__links a{ display:inline-flex; align-items:center; height:100%; font-family:var(--f-display); font-size:clamp(0.74rem, 0.9vw, 0.84rem); letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim); text-decoration:none; padding:0 .15rem; position:relative; transition:color .3s var(--ease); white-space:nowrap; flex-shrink:0; line-height:1; vertical-align:middle; } .nav__links a::after{ content:''; position:absolute; left:0; right:100%; bottom:14px; height:1px; background:var(--gold-400); transition:right .35s var(--ease); } .nav__links a:hover{color:var(--gold-200)} .nav__links a:hover::after{right:0} .nav__links a.is-active{color:var(--gold-300)} .nav__links a.is-active::after{right:0; background:var(--gold-700)} .nav__audio{ display:inline-flex; align-items:center; gap:.45rem; background:rgba(201,162,39,.06); border:1px solid rgba(201,162,39,.28); color:var(--paper-dim); border-radius:var(--r); padding:.35rem .75rem; cursor:pointer; font-family:var(--f-display); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; transition:all .3s var(--ease); margin-left:.6rem; flex-shrink:0; height:32px; } .nav__audio:hover{ border-color:var(--gold-400); color:var(--gold-200); background:rgba(201,162,39,.14); } .nav__audio-icon{width:14px; height:14px; flex-shrink:0; stroke:currentColor} .nav__audio-icon--on{display:none} .nav__audio.is-playing{ border-color:var(--gold-400); color:var(--gold-300); background:rgba(201,162,39,.18); box-shadow:0 0 14px rgba(201,162,39,.25); } .nav__audio.is-playing .nav__audio-icon--off{display:none} .nav__audio.is-playing .nav__audio-icon--on{display:inline-block} .nav__audio-label{line-height:1} .nav__toggle{ display:none; margin-left:auto; background:none; border:1px solid rgba(201,162,39,.35); width:42px; height:36px; cursor:pointer; padding:9px 10px; gap:4px; flex-direction:column; justify-content:center; border-radius:var(--r); } .nav__toggle span{display:block; height:1px; background:var(--gold-300); transition:.3s var(--ease)} .nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)} .nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)} @media (max-width:1200px){ .nav__toggle{display:flex; width:46px; height:40px} .nav__links{ position:fixed; inset:72px 0 auto 0; flex-direction:column; gap:0; background:rgba(5,4,3,.98); backdrop-filter:blur(20px); border-bottom:1px solid rgba(201,162,39,.22); padding:.6rem clamp(1rem,4vw,2rem) 1.6rem; transform:translateY(-160%); transition:transform .5s var(--ease); margin-left:0; flex-wrap:wrap; height:auto; } .nav.is-open .nav__links{transform:translateY(0)} .nav__links a{padding:1rem 0; border-bottom:1px solid rgba(201,162,39,.1); font-size:.92rem; height:auto} } /* ========================================================================== HERO SECTION (SEM OVERLAP DE BLUR SOBRE BOTÕES, FUSÃO PERFEITA) ========================================================================== */ .hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:7rem clamp(1rem,5vw,2rem) 6rem; overflow:hidden; } .hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:saturate(1.06) contrast(1.04); } .hero__scrim{ position:absolute; inset:0; z-index:1; background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(5,4,3,.15) 0%, rgba(5,4,3,.65) 60%, rgba(5,4,3,.95) 100%), linear-gradient(180deg, rgba(5,4,3,.8) 0%, rgba(5,4,3,.2) 28%, rgba(5,4,3,.55) 70%, #050403 100%); } /* CONTEÚDO DA HERO FICA ESTRITAMENTE ACIMA DE QUALQUER CAMADA (Z-INDEX 10) */ .hero__in{ position:relative; z-index:10; max-width:900px; } .hero__crest{ position:relative; width:clamp(170px,24vw,270px); height:clamp(170px,24vw,270px); margin:0 auto 1.4rem; background:linear-gradient(160deg, #ffe89c 0%, #f7ce5b 35%, #d4a327 68%, #a67c17 100%); filter:drop-shadow(0 0 18px rgba(247,206,91,.38)) drop-shadow(0 6px 18px rgba(0,0,0,.8)); animation:riseIn 1.5s var(--ease) both; } .hero__crest::before{ content:''; position:absolute; z-index:-1; inset:-22% -22% -15% -22%; background:radial-gradient(circle at 50% 45%, rgba(247,206,91,.25) 0%, rgba(201,162,39,.14) 40%, transparent 72%); } .hero__eyebrow{ font-family:var(--f-display); font-size:clamp(.55rem,1.1vw,.66rem); letter-spacing:.38em; text-transform:uppercase; color:var(--gold-400); margin:0 0 1.2rem; animation:riseIn 1.5s .12s var(--ease) both; } .hero__title{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.8rem,8.5vw,5.8rem); line-height:1.05; letter-spacing:.04em; margin:0 0 1.4rem; text-transform:uppercase; background:linear-gradient(168deg, #fff5d6 0%, #fadb73 35%, #dfb53b 65%, #c9961a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 32px rgba(0,0,0,.85)); animation:riseIn 1.6s .22s var(--ease) both; } .hero__title em{ font-family:var(--f-display); font-style:normal; font-weight:700; text-transform:uppercase; font-size:1em; letter-spacing:.02em; display:inline-block; background:linear-gradient(168deg, #ffffff 0%, #fff0b8 25%, #f7ce5b 60%, #e2b02e 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 20px rgba(247,206,91,.45)); } .hero__sub{ max-width:580px; margin:0 auto 1.2rem; font-size:clamp(1rem,2.1vw,1.14rem); line-height:1.75; color:var(--paper-dim); animation:riseIn 1.6s .34s var(--ease) both; } .hero__sub strong{color:var(--gold-300); font-weight:400} .hero__badge{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(201,162,39,.1); border:1px solid rgba(201,162,39,.32); border-radius:20px; padding:.4rem 1.1rem; margin:0 auto 1.4rem; font-family:var(--f-display); font-size:clamp(.62rem,.84vw,.72rem); letter-spacing:.06em; text-transform:uppercase; color:var(--gold-300); max-width:700px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:riseIn 1.4s .08s var(--ease) both; box-shadow:0 4px 18px rgba(0,0,0,.4); } .hero__badge-dot{ width:6px; height:6px; background:var(--gold-400); border-radius:50%; box-shadow:0 0 8px var(--gold-400); flex-shrink:0; } .hero__cta{ display:flex; gap:.9rem; justify-content:center; align-items:center; flex-wrap:wrap; position:relative; z-index:11; animation:riseIn 1.6s .46s var(--ease) both; } .btn-info{ width:42px; height:42px; border-radius:50%; background:rgba(201,162,39,.14); border:1px solid var(--gold-400); color:var(--gold-300); font-family:var(--f-display); font-weight:700; font-size:1.15rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all .35s var(--ease); box-shadow:0 0 16px rgba(201,162,39,.25); line-height:1; padding:0; flex-shrink:0; } .btn-info:hover, .btn-info.is-active{ background:rgba(201,162,39,.32); border-color:var(--gold-200); color:var(--paper-light); transform:scale(1.1); box-shadow:0 0 24px rgba(233,206,122,.5); } /* Card Expansível Inline na Hero */ .hero__info-card{ max-width:580px; margin:1.4rem auto 0; padding:1.2rem 1.4rem; background:rgba(12,9,6,.94); border:1px solid var(--gold-400); border-radius:6px; box-shadow:0 14px 40px rgba(0,0,0,.85), 0 0 25px rgba(201,162,39,.2); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); text-align:left; position:relative; display:none; animation:fadeInUp .4s var(--ease) both; } .hero__info-card.is-open{ display:block; } .hero__info-card-close{ position:absolute; top:8px; right:12px; background:none; border:none; color:var(--paper-mute); font-size:1.4rem; cursor:pointer; padding:0 4px; } .hero__info-card-close:hover{ color:var(--gold-300); } .hero__info-card-title{ font-family:var(--f-display); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300); margin-bottom:.5rem; } .hero__info-card p{ font-size:.88rem; line-height:1.65; color:var(--paper-dim); margin:0; } .hero__info-card p strong{ color:var(--gold-300); font-weight:400; } /* Modal Centralizado de Alta Prioridade */ .info-modal{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:1.5rem; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s var(--ease), visibility .35s; } .info-modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; } .info-modal__backdrop{ position:absolute; inset:0; background:rgba(4,3,2,.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .info-modal__content{ position:relative; z-index:2; width:100%; max-width:520px; background:linear-gradient(160deg, rgba(20,16,11,.98), rgba(8,6,4,.98)); border:1px solid var(--gold-400); border-radius:8px; padding:2.2rem 2rem 1.8rem; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.95), 0 0 35px rgba(201,162,39,.25); transform:scale(.92); transition:transform .35s var(--ease); } .info-modal.is-open .info-modal__content{ transform:scale(1); } .info-modal__close{ position:absolute; top:12px; right:16px; background:none; border:none; color:var(--paper-mute); font-size:1.6rem; cursor:pointer; line-height:1; } .info-modal__close:hover{ color:var(--gold-300); } .info-modal__badge{ font-family:var(--f-display); font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-400); margin-bottom:.8rem; } .info-modal__title{ font-family:var(--f-display); font-size:1.35rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-200); margin:0 0 1rem; } .info-modal__text{ font-size:.92rem; line-height:1.7; color:var(--paper-dim); margin:0 0 1rem; text-align:left; } .info-modal__text strong{ color:var(--gold-300); font-weight:400; } .info-modal__btn{ margin-top:.8rem; width:100%; } @keyframes fadeInUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } } .btn{ display:inline-block; text-decoration:none; cursor:pointer; font-family:var(--f-display); font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; padding:.75rem 1.8rem; border-radius:var(--r); transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), color .4s var(--ease); } .btn--gold{ background:linear-gradient(140deg,var(--gold-300),var(--gold-500) 52%,var(--gold-700)); color:var(--ink-900); border:1px solid var(--gold-400); box-shadow:0 6px 26px rgba(201,162,39,.24); } .btn--gold:hover{transform:translateY(-2px); box-shadow:0 12px 40px rgba(223,187,78,.42)} .btn--ghost{ background:transparent; color:var(--gold-300); border:1px solid rgba(201,162,39,.45); } .btn--ghost:hover{background:rgba(201,162,39,.1); border-color:var(--gold-400); transform:translateY(-2px)} .hero__scroll{ display:none !important; } .hero__scrollline{ width:1px; height:52px; background:linear-gradient(180deg,transparent,var(--gold-500)); position:relative; overflow:hidden; } .hero__scrollline::after{ content:''; position:absolute; inset:0; background:var(--gold-200); animation:trickle 2.6s var(--ease) infinite; } .hero__scrolltxt{ font-family:var(--f-display); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--paper-mute); } @keyframes trickle{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}} @keyframes riseIn{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}} /* ========================================================================== SEÇÕES — BASE ========================================================================== */ .sec{padding:clamp(5rem,11vw,9.5rem) clamp(1rem,5vw,2rem); position:relative} .wrap{max-width:var(--wrap); margin:0 auto; position:relative; z-index:2} .kicker{ display:flex; align-items:center; gap:1rem; margin:0 0 1.4rem; font-family:var(--f-display); font-size:.66rem; font-weight:600; letter-spacing:.36em; text-transform:uppercase; color:var(--gold-500); } .kicker__rule{display:block; width:clamp(28px,5vw,60px); height:1px; background:var(--gold-700)} .kicker--c{justify-content:center} .h2{ font-family:var(--f-display); font-weight:600; font-size:clamp(2rem,5.4vw,3.5rem); line-height:1.08; letter-spacing:.005em; margin:0 0 1.8rem; color:var(--paper); } .h2--center{text-align:center; margin-left:auto; margin-right:auto} .h3{font-family:var(--f-display); font-weight:600; font-size:clamp(1.15rem,2.6vw,1.6rem); letter-spacing:.06em; color:var(--gold-300); margin:0 0 1.2rem} .h3--center{text-align:center} .intro{ max-width:var(--wrap-narrow); margin:0 auto clamp(3rem,6vw,4.5rem); text-align:center; font-size:clamp(1.02rem,2.2vw,1.16rem); line-height:1.85; color:var(--paper-dim); } .intro em{color:var(--gold-300); font-style:italic} .lead{font-size:clamp(1.1rem,2.4vw,1.28rem); line-height:1.8; color:var(--paper)} .dropcap::first-letter{ float:left; font-family:var(--f-display); font-weight:700; font-size:4.1em; line-height:.82; padding:.06em .14em 0 0; background:linear-gradient(160deg,var(--gold-200),var(--gold-500) 60%,var(--gold-900)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ========================================================================== MENSAGEM / PREFÁCIO ========================================================================== */ /* funde com o hero: começa transparente no topo (deixando a base #0B0906 do hero continuar) e só ganha corpo mais abaixo — sem linha divisória */ .sec--message{ background: radial-gradient(ellipse 80% 60% at 18% 40%, rgba(107,82,24,.16) 0%, transparent 62%), linear-gradient(180deg, transparent 0, rgba(12,9,6,.42) 220px); padding-top:clamp(6rem,12vw,10rem); } .message{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(2.5rem,6vw,5rem); align-items:start} .message__fig{margin:0; position:sticky; top:118px} .message__frame{ display:block; position:relative; padding:12px; background:linear-gradient(160deg, rgba(201,162,39,.22), rgba(107,82,24,.08)); border:1px solid rgba(201,162,39,.3); border-radius:var(--r); box-shadow:0 24px 60px rgba(0,0,0,.55); } .message__frame::after{ content:''; position:absolute; inset:6px; border:1px solid rgba(201,162,39,.22); pointer-events:none; } .message__portrait{ display:block; width:100%; height:auto; border-radius:1px; filter:saturate(1.02) contrast(1.02); } .message__fig figcaption{ margin-top:1.3rem; text-align:center; font-family:var(--f-serif); font-style:italic; font-size:.98rem; color:var(--paper-mute); } .message__body p{margin:0 0 1.4rem} .pull{ margin:2.6rem 0; padding:1.8rem 0 1.8rem 2rem; border-left:2px solid var(--gold-700); font-family:var(--f-serif); font-style:italic; font-weight:300; font-size:clamp(1.2rem,2.8vw,1.52rem); line-height:1.62; color:var(--gold-200); } .pull p{margin:0} .sign{font-family:var(--f-serif); font-size:1.02rem; color:var(--paper-mute)} .sign em{color:var(--gold-500)} @media (max-width:900px){ .message{grid-template-columns:1fr} .message__fig{position:static; max-width:340px; margin:0 auto} } /* ========================================================================== FILOSOFIA ========================================================================== */ .sec--philo{ background:linear-gradient(180deg, rgba(12,9,6,.28), rgba(8,6,4,.5) 50%, rgba(12,9,6,.28)); } .inscription{ margin:0 auto clamp(3.5rem,7vw,5.5rem); max-width:720px; text-align:center; padding:clamp(2rem,5vw,3rem) clamp(1.4rem,4vw,2.6rem); border-top:1px solid rgba(201,162,39,.28); border-bottom:1px solid rgba(201,162,39,.28); background:radial-gradient(ellipse at center, rgba(201,162,39,.07), transparent 72%); } .inscription blockquote{margin:0 0 1rem} .inscription blockquote p{ margin:0; font-family:var(--f-display); font-weight:400; font-size:clamp(1.1rem,3.4vw,1.85rem); letter-spacing:.13em; text-transform:uppercase; line-height:1.4; background:linear-gradient(150deg,var(--gold-200),var(--gold-500) 60%,var(--gold-900)); -webkit-background-clip:text; background-clip:text; color:transparent; } .inscription figcaption{ font-family:var(--f-serif); font-style:italic; font-size:.95rem; color:var(--paper-mute); } .pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(1.2rem,2.6vw,1.9rem); margin-bottom:clamp(4rem,8vw,6rem); } .pillar{ position:relative; padding:clamp(1.9rem,3.6vw,2.7rem); background:linear-gradient(165deg, rgba(27,21,13,.9), rgba(14,11,7,.94)); border:1px solid rgba(201,162,39,.17); border-radius:var(--r); transition:border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); overflow:hidden; } .pillar::before{ content:''; position:absolute; inset:0 auto 0 0; width:2px; background:linear-gradient(180deg,var(--gold-500),transparent); opacity:0; transition:opacity .5s var(--ease); } .pillar:hover{ border-color:rgba(201,162,39,.45); transform:translateY(-4px); box-shadow:0 18px 46px rgba(0,0,0,.5); } .pillar:hover::before{opacity:1} .pillar__num{ display:block; font-family:var(--f-display); font-weight:700; font-size:2.5rem; line-height:1; color:transparent; margin-bottom:1rem; background:linear-gradient(150deg,var(--gold-400),var(--gold-900)); -webkit-background-clip:text; background-clip:text; } .pillar h4{ font-family:var(--f-display); font-weight:600; font-size:1.14rem; letter-spacing:.055em; margin:0 0 1rem; color:var(--gold-200); } .pillar p{margin:0 0 1rem; font-size:.99rem; line-height:1.76; color:var(--paper-dim)} .pillar__note{ font-size:.9rem !important; color:var(--paper-mute) !important; padding-top:1rem; border-top:1px solid rgba(201,162,39,.14); margin-bottom:0 !important; } .pillar strong{color:var(--gold-300); font-weight:400} .pillar em{color:var(--gold-300)} .lineage{max-width:var(--wrap-narrow); margin:0 auto} .lineage__lead{color:var(--paper-dim); margin:0 0 2rem} .lineage__list{margin:0; display:grid; gap:1.4rem} .lineage__list > div{ padding:1.5rem 1.7rem; border-left:2px solid var(--gold-900); background:linear-gradient(90deg, rgba(201,162,39,.05), transparent 70%); transition:border-color .4s var(--ease); } .lineage__list > div:hover{border-left-color:var(--gold-500)} .lineage__list dt{ font-family:var(--f-display); font-weight:600; font-size:.94rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-300); margin-bottom:.55rem; } .lineage__list dt em{font-family:var(--f-serif); text-transform:none; letter-spacing:.02em; font-size:1.08rem} .lineage__list dd{margin:0; font-size:1rem; line-height:1.74; color:var(--paper-dim)} /* collage dos seis fascículos */ .collage{ margin:0 auto clamp(3.5rem,7vw,5.5rem); max-width:960px; position:relative; } .collage img{ width:100%; border-radius:var(--r); border:1px solid rgba(201,162,39,.28); box-shadow:0 26px 70px rgba(0,0,0,.6); } .collage figcaption{ margin-top:1.1rem; text-align:center; font-family:var(--f-serif); font-style:italic; font-size:1.02rem; color:var(--paper-mute); } /* ========================================================================== INTERLÚDIO — panorama da Civilização Tropical (full-bleed) ========================================================================== */ .interlude{ position:relative; isolation:isolate; min-height:min(88vh,760px); display:flex; align-items:center; justify-content:center; text-align:center; padding:clamp(5rem,12vw,9rem) clamp(1.2rem,5vw,2rem); overflow:hidden; } .interlude__bg{ position:absolute; inset:0; z-index:-2; background:url('../img/panorama.jpg') center/cover no-repeat; transform:scale(1.06); } .interlude__scrim{ position:absolute; inset:0; z-index:-1; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(5,4,3,.28) 0%, rgba(5,4,3,.72) 70%, rgba(5,4,3,.95) 100%), linear-gradient(180deg, #050403 0%, rgba(5,4,3,.35) 22%, rgba(5,4,3,.4) 78%, #050403 100%); } .interlude__in{position:relative; max-width:820px} .interlude__txt{ max-width:640px; margin:0 auto 2rem; font-size:clamp(1.05rem,2.4vw,1.24rem); line-height:1.82; color:var(--paper); } .interlude__quote{ margin:0 auto; max-width:660px; padding:1.6rem 0 0; border-top:1px solid rgba(201,162,39,.28); font-family:var(--f-serif); font-style:italic; font-weight:300; font-size:clamp(1.15rem,2.8vw,1.5rem); line-height:1.6; color:var(--gold-200); } .interlude__quote p{margin:0} /* ========================================================================== AS TRÊS PARTES ========================================================================== */ .sec--parts{ background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(107,82,24,.15), transparent 70%), rgba(5,4,3,.4); border:none; } .parts{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:clamp(1.4rem,3vw,2.2rem)} .part{ display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; padding:clamp(2rem,4vw,2.8rem) clamp(1.4rem,3vw,2rem); border:1px solid rgba(201,162,39,.18); border-radius:var(--r); background:linear-gradient(170deg, rgba(27,21,13,.72), rgba(8,6,4,.86)); transition:transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease); } .part:hover{ transform:translateY(-6px); border-color:rgba(201,162,39,.5); box-shadow:0 22px 56px rgba(0,0,0,.55), 0 0 0 1px rgba(201,162,39,.1) inset; } .part__seal{ width:clamp(104px,15vw,142px); height:auto; margin-bottom:1.6rem; filter:drop-shadow(0 6px 22px rgba(0,0,0,.6)); transition:transform .7s var(--ease), filter .7s var(--ease); } .part:hover .part__seal{transform:scale(1.05) rotate(-2deg); filter:drop-shadow(0 0 30px rgba(223,187,78,.4))} .part__no{ font-family:var(--f-display); font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-500); margin-bottom:.7rem; } .part__title{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.25rem,3vw,1.6rem); letter-spacing:.05em; margin:0 0 1rem; color:var(--paper); } .part__desc{margin:0 0 1.4rem; font-size:.97rem; line-height:1.74; color:var(--paper-dim)} .part__meta{ font-family:var(--f-display); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-mute); margin-top:auto; padding-top:1rem; border-top:1px solid rgba(201,162,39,.16); width:100%; } /* ========================================================================== CÓDICE — 14 CAPÍTULOS ========================================================================== */ .sec--codex{background:rgba(12,9,6,.34)} .filters{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:clamp(2.4rem,5vw,3.4rem); } .filter{ font-family:var(--f-display); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; padding:.72rem 1.3rem; border-radius:var(--r); background:transparent; color:var(--paper-mute); border:1px solid rgba(201,162,39,.22); transition:.4s var(--ease); } .filter:hover{color:var(--gold-200); border-color:rgba(201,162,39,.5)} .filter.is-on{ background:linear-gradient(140deg,var(--gold-500),var(--gold-900)); color:var(--ink-900); border-color:var(--gold-400); } .codex{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:clamp(1rem,2.2vw,1.5rem); } .cap{ display:flex; flex-direction:column; text-align:left; cursor:pointer; padding:clamp(1.4rem,2.5vw,1.8rem); background:linear-gradient(168deg, rgba(27,21,13,.86), rgba(10,8,5,.94)); border:1px solid rgba(201,162,39,.16); border-radius:var(--r); color:inherit; font:inherit; width:100%; height:440px; position:relative; overflow:hidden; transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); } .cap::after{ content:''; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg,transparent,var(--gold-500),transparent); opacity:0; transition:opacity .5s var(--ease); } .cap:hover{ transform:translateY(-5px); border-color:rgba(201,162,39,.46); box-shadow:0 20px 50px rgba(0,0,0,.55); } .cap:hover::after{opacity:1} .cap.is-hidden{display:none} /* emblema xilográfico do capítulo (quando houver) */ .cap__emblem{ height:64px; margin:0 0 .9rem; display:flex; align-items:center; flex-shrink:0; } .cap__emblem img{ height:100%; width:auto; filter:drop-shadow(0 4px 12px rgba(0,0,0,.55)); transition:transform .6s var(--ease); } .cap:hover .cap__emblem img{transform:scale(1.06) rotate(-1.5deg)} .cap__top{display:flex; align-items:center; gap:1rem; margin-bottom:.9rem; flex-shrink:0} .cap__seal{ flex-shrink:0; width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(201,162,39,.4); border-radius:50%; font-family:var(--f-display); font-weight:600; font-size:.86rem; letter-spacing:.04em; color:var(--gold-300); background:radial-gradient(circle at 34% 28%, rgba(201,162,39,.22), transparent 70%); transition:.5s var(--ease); } .cap:hover .cap__seal{ border-color:var(--gold-400); color:var(--ink-900); background:linear-gradient(140deg,var(--gold-300),var(--gold-700)); } .cap__tema{ font-family:var(--f-display); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-500); display:block; margin-bottom:.3rem; } .cap__parte{font-family:var(--f-serif); font-style:italic; font-size:.86rem; color:var(--paper-mute)} .cap__titulo{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.05rem,2.2vw,1.26rem); line-height:1.28; letter-spacing:.02em; margin:0 0 .7rem; color:var(--paper); height:3.1rem; min-height:3.1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex-shrink:0; } .cap__resumo{ margin:0 0 1rem; font-size:0.96rem; line-height:1.65; color:var(--paper-dim); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; height:4.8rem; flex-shrink:0; } .cap__more{ margin:auto 0 0; padding-top:0.8rem; border-top:1px solid rgba(201,162,39,.14); flex-shrink:0; } .cap__go{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; width:100%; padding:0; background:none; border:none; cursor:pointer; text-align:left; font-family:var(--f-display); font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-500); } /* estica a área de clique sobre o cartão inteiro */ .cap__go::after{content:''; position:absolute; inset:0; border-radius:var(--r)} .cap__go span[aria-hidden]{transition:transform .4s var(--ease)} .cap:hover .cap__go span[aria-hidden]{transform:translateX(5px)} .cap:focus-within{border-color:rgba(201,162,39,.5)} .cap__go:focus-visible{outline:none} .cap__go:focus-visible::after{outline:2px solid var(--gold-400); outline-offset:3px} /* texto só para leitores de tela */ .sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ========================================================================== LEITOR (DIALOG) ========================================================================== */ .reader{ width:min(880px,94vw); max-height:88vh; padding:0; border:none; border-radius:var(--r); background:linear-gradient(170deg,var(--ink-700),var(--ink-900)); color:var(--paper); overflow:hidden; box-shadow:0 40px 120px rgba(0,0,0,.85), 0 0 0 1px rgba(201,162,39,.28); } .reader::backdrop{background:rgba(4,3,2,.86); backdrop-filter:blur(8px)} .reader[open]{display:flex; flex-direction:column; animation:readerIn .5s var(--ease)} @keyframes readerIn{from{opacity:0; transform:translateY(20px) scale(.99)} to{opacity:1; transform:none}} .reader__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem clamp(1.3rem,4vw,2.6rem); border-bottom:1px solid rgba(201,162,39,.22); background:rgba(8,6,4,.7); flex-shrink:0; } .reader__part{ font-family:var(--f-display); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-500); } .reader__x{ background:none; border:1px solid rgba(201,162,39,.3); color:var(--gold-300); width:36px; height:36px; font-size:1.4rem; line-height:1; cursor:pointer; border-radius:var(--r); transition:.35s var(--ease); flex-shrink:0; } .reader__x:hover{background:rgba(201,162,39,.16); border-color:var(--gold-400)} .reader__body{ overflow-y:auto; padding:clamp(1.8rem,5vw,3.2rem) clamp(1.3rem,4vw,3.2rem); scrollbar-width:thin; scrollbar-color:var(--gold-900) transparent; } .reader__body::-webkit-scrollbar{width:8px} .reader__body::-webkit-scrollbar-thumb{background:var(--gold-900); border-radius:8px} .rd__num-wrap{ display:inline-flex; align-items:center; gap:1rem; margin:0 0 .6rem; line-height:1; } .rd__num-icon{ height:clamp(2.6rem, 8vw, 3.8rem); width:auto; object-fit:contain; border:none; background:none; padding:0; margin:0; border-radius:0; box-shadow:none; filter:drop-shadow(0 2px 8px rgba(0,0,0,.7)); flex-shrink:0; vertical-align:middle; } .rd__num{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.6rem,8vw,4rem); line-height:1; margin:0; color:transparent; background:linear-gradient(150deg,var(--gold-300),var(--gold-900)); -webkit-background-clip:text; background-clip:text; vertical-align:middle; } .rd__tema{ font-family:var(--f-display); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-500); margin:0 0 .8rem; } .rd__titulo{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.7rem,5vw,2.6rem); line-height:1.1; margin:0 0 1.6rem; color:var(--paper); } .rd__resumo{ font-family:var(--f-serif); font-style:italic; font-weight:300; font-size:clamp(1.1rem,2.6vw,1.35rem); line-height:1.62; color:var(--gold-200); margin:0 0 2.6rem; padding-bottom:2rem; border-bottom:1px solid rgba(201,162,39,.2); } .rd__h{ font-family:var(--f-display); font-weight:600; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-500); margin:2.8rem 0 1.2rem; display:flex; align-items:center; gap:.9rem; } .rd__h::after{content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(201,162,39,.35),transparent)} .rd__h:first-child{margin-top:0} .reader__body p{margin:0 0 1.15rem; color:var(--paper-dim)} .reader__body em{color:var(--gold-300)} .reader__body strong{color:var(--gold-200); font-weight:400} .rd__nums{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:rgba(201,162,39,.16); border:1px solid rgba(201,162,39,.16); margin:0 0 1rem; } .rd__nums div{padding:1.2rem 1.3rem; background:var(--ink-800)} .rd__nums b{ display:block; font-family:var(--f-display); font-weight:600; font-size:clamp(1.05rem,2.6vw,1.28rem); color:var(--gold-300); margin-bottom:.4rem; } .rd__nums span{font-size:.86rem; line-height:1.6; color:var(--paper-mute)} .rd__props{list-style:none; margin:0; padding:0; counter-reset:p} .rd__props li{ counter-increment:p; position:relative; padding:.2rem 0 1.15rem 2.9rem; color:var(--paper-dim); font-size:.99rem; line-height:1.75; } .rd__props li::before{ content:counter(p,decimal-leading-zero); position:absolute; left:0; top:.24rem; font-family:var(--f-display); font-weight:600; font-size:.76rem; letter-spacing:.06em; color:var(--gold-700); } .rd__fecho{ margin-top:2.4rem; padding:1.7rem 1.9rem; border-left:2px solid var(--gold-700); background:linear-gradient(90deg, rgba(201,162,39,.07), transparent 75%); font-family:var(--f-serif); font-size:1.06rem; line-height:1.72; } .rd__fecho p{margin:0; color:var(--paper) !important} .reader__nav{ display:flex; gap:1px; background:rgba(201,162,39,.2); flex-shrink:0; border-top:1px solid rgba(201,162,39,.22); } .reader__nav button{ flex:1; padding:1.1rem 1rem; background:var(--ink-800); border:none; cursor:pointer; font-family:var(--f-display); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-400); transition:.35s var(--ease); } .reader__nav button:hover:not(:disabled){background:rgba(201,162,39,.14); color:var(--gold-200)} .reader__nav button:disabled{opacity:.3; cursor:default} /* ========================================================================== NÚMEROS ========================================================================== */ .sec--figures{ background: radial-gradient(ellipse 70% 60% at 80% 20%, rgba(107,82,24,.16), transparent 68%), rgba(8,6,4,.34); border-top:1px solid rgba(201,162,39,.1); } .figures{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:rgba(201,162,39,.15); border:1px solid rgba(201,162,39,.15); } .fig{ padding:clamp(1.7rem,3.4vw,2.4rem) clamp(1.3rem,2.6vw,1.8rem); background:var(--ink-900); transition:background .5s var(--ease); } .fig:hover{background:var(--ink-700)} .fig__v{ display:block; font-family:var(--f-display); font-weight:600; font-size:clamp(1.5rem,3.6vw,2.05rem); line-height:1.1; margin-bottom:.7rem; color:transparent; background:linear-gradient(150deg,var(--gold-200),var(--gold-400) 45%,var(--gold-700)); -webkit-background-clip:text; background-clip:text; font-variant-numeric:tabular-nums; } .fig__l{display:block; font-size:.9rem; line-height:1.65; color:var(--paper-mute)} /* ========================================================================== LÉXICO ========================================================================== */ .sec--lexicon{background:rgba(12,9,6,.34)} .lexicon{ display:grid; grid-template-columns:repeat(auto-fit,minmax(292px,1fr)); gap:clamp(1rem,2.2vw,1.4rem); } .lex{ padding:clamp(1.5rem,3vw,1.9rem); border:1px solid rgba(201,162,39,.15); border-radius:var(--r); background:linear-gradient(168deg, rgba(27,21,13,.6), rgba(10,8,5,.85)); transition:border-color .5s var(--ease), transform .5s var(--ease); } .lex:hover{border-color:rgba(201,162,39,.42); transform:translateY(-3px)} .lex__t{ font-family:var(--f-display); font-weight:600; font-size:.92rem; letter-spacing:.07em; color:var(--gold-300); margin:0 0 .8rem; display:flex; align-items:baseline; gap:.6rem; } .lex__t::before{content:'§'; color:var(--gold-700); font-size:1.1em; flex-shrink:0} .lex__d{margin:0; font-size:1rem; line-height:1.74; color:var(--paper-dim)} /* ========================================================================== PERGUNTAS DIFÍCEIS ========================================================================== */ .sec--faq{ background:linear-gradient(180deg, rgba(12,9,6,.3), rgba(8,6,4,.48)); border-top:1px solid rgba(201,162,39,.1); } .faq{max-width:860px; margin:0 auto; display:grid; gap:.9rem} .qa{ border:1px solid rgba(201,162,39,.16); border-radius:var(--r); background:linear-gradient(168deg, rgba(27,21,13,.6), rgba(10,8,5,.82)); transition:border-color .45s var(--ease); overflow:hidden; } .qa[open]{border-color:rgba(201,162,39,.42)} .qa summary{ list-style:none; cursor:pointer; padding:clamp(1.2rem,3vw,1.6rem) clamp(1.3rem,3vw,2rem); display:flex; align-items:flex-start; gap:1.2rem; transition:background .4s var(--ease); } .qa summary::-webkit-details-marker{display:none} .qa summary:hover{background:rgba(201,162,39,.05)} .qa__q{ flex:1; font-family:var(--f-display); font-weight:500; font-size:clamp(.96rem,2.2vw,1.08rem); line-height:1.5; letter-spacing:.015em; color:var(--paper); } .qa__ico{ flex-shrink:0; width:24px; height:24px; position:relative; margin-top:.24rem; border:1px solid rgba(201,162,39,.4); border-radius:50%; } .qa__ico::before,.qa__ico::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--gold-400); transition:.4s var(--ease); } .qa__ico::before{width:10px; height:1px} .qa__ico::after{width:1px; height:10px} .qa[open] .qa__ico::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0} .qa__a{ padding:0 clamp(1.3rem,3vw,2rem) clamp(1.5rem,3vw,2rem); border-top:1px solid rgba(201,162,39,.14); margin-top:0; padding-top:1.5rem; } .qa__a p{margin:0 0 1.1rem; font-size:.99rem; line-height:1.78; color:var(--paper-dim)} .qa__a p:last-child{margin-bottom:0} .qa__a strong{color:var(--gold-200); font-weight:400} .qa__a em{color:var(--gold-300)} .qa__mea{ padding:1.1rem 1.3rem; border-left:2px solid var(--crimson-lt); background:rgba(126,31,23,.1); } .qa__caveat{ font-size:.9rem !important; color:var(--paper-mute) !important; padding-top:1.1rem; border-top:1px dashed rgba(201,162,39,.22); } /* ========================================================================== APELO ========================================================================== */ .sec--call{ text-align:center; overflow:hidden; background: radial-gradient(ellipse 68% 62% at 50% 46%, rgba(107,82,24,.26), transparent 68%), rgba(8,6,4,.42); border-top:1px solid rgba(201,162,39,.1); } .call__beast{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(760px,120%); height:min(640px,100%); opacity:.07; z-index:1; pointer-events:none; } .call__quote{ max-width:700px; margin:0 auto 2.4rem; padding:0; font-family:var(--f-serif); font-style:italic; font-weight:300; font-size:clamp(1.2rem,3.2vw,1.7rem); line-height:1.62; color:var(--gold-200); } .call__quote p{margin:0 0 1.2rem} .call__quote cite{ display:block; font-style:normal; font-family:var(--f-display); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-500); } .call__txt{max-width:640px; margin:0 auto 2.8rem; color:var(--paper-dim)} /* ========================================================================== RODAPÉ ========================================================================== */ .foot{ background:rgba(6,4,3,.66); border-top:1px solid rgba(201,162,39,.2); padding:clamp(3rem,6vw,4.5rem) clamp(1rem,5vw,2rem) 2rem; } .foot__in{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(1.6rem,4vw,3rem); align-items:start; } .foot__mark{width:64px; height:64px; opacity:.85; flex-shrink:0} .foot__t{ font-family:var(--f-display); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-300); margin:0 0 .9rem; } .foot__s{margin:0; font-size:.86rem; line-height:1.72; color:var(--paper-mute); max-width:56ch} .foot__disclaimer{ margin:.9rem 0 0; font-size:.82rem; line-height:1.68; color:var(--paper-dim); max-width:60ch; padding-top:.8rem; border-top:1px dashed rgba(201,162,39,.18); } .foot__disclaimer strong{color:var(--gold-300); font-weight:400} .foot__nav{display:flex; flex-direction:column; gap:.6rem} .foot__nav a{ font-family:var(--f-display); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-dim); text-decoration:none; transition:color .3s var(--ease); white-space:nowrap; } .foot__nav a:hover{color:var(--gold-300)} .foot__credits{ margin:clamp(2.2rem,5vw,3.2rem) auto 0; text-align:center; max-width:720px; padding-top:1.4rem; border-top:1px solid rgba(201,162,39,.16); } .foot__author{ font-family:var(--f-serif); font-style:italic; font-size:.95rem; line-height:1.6; color:var(--paper-dim); margin:0 0 .8rem; } .foot__author strong{ color:var(--gold-300); font-family:var(--f-display); font-style:normal; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; } .foot__legal{ margin:.4rem 0 0; text-align:center; font-family:var(--f-display); font-size:.62rem; letter-spacing:.42em; text-transform:uppercase; color:var(--gold-700); } @media (max-width:820px){ .foot__in{grid-template-columns:1fr; justify-items:start} .foot__nav{flex-direction:row; flex-wrap:wrap; gap:.9rem 1.4rem} } /* ========================================================================== REVELAÇÃO NO SCROLL ========================================================================== */ [data-rise]{opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease)} [data-rise].is-in{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important} [data-rise]{opacity:1; transform:none} .hero__video{display:none} }