/* ============================================================ Essência Cognitiva — Páginas internas (Bruno / Adriana) Complementa styles/home.css ============================================================ */ /* accent fixo por página via data-accent no (já suportado no home.css) */ /* ---------- hero de perfil ---------- */ .profile-hero { padding: 84px 0 72px; } .profile-hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: center; } .profile-hero .hero-copy h1 { font-size: clamp(38px, 4.6vw, 58px); letter-spacing: -0.015em; } .profile-hero .crp-line { font-size: 14px; color: var(--ink-soft); letter-spacing: 0.04em; } .profile-photo { position: relative; } .profile-photo image-slot, .profile-photo .photo { width: 100%; height: 480px; box-shadow: 0 30px 60px -30px rgba(36, 56, 67, 0.35); } /* ---------- você se reconhece? ---------- */ .recognize { padding: 96px 0; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .recognize .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; } .recognize-list { display: grid; gap: 0; border-top: 1px solid var(--line); } .recognize-item { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; color: var(--ink); text-wrap: pretty; } .recognize-item .tick { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-size: 15px; margin-top: 2px; } .recognize-note { margin-top: 24px; font-size: 14.5px; color: var(--ink-soft); } /* ---------- história ---------- */ .story { padding: 110px 0; } .story .wrap { display: grid; grid-template-columns: 0.42fr 0.58fr; gap: 72px; align-items: start; } .story-side { display: grid; gap: 24px; position: sticky; top: 110px; } .story-side h2 { font-size: clamp(30px, 3.4vw, 40px); } .pull-quote { font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.45; color: var(--accent); border-left: 3px solid var(--accent); padding-left: 22px; text-wrap: pretty; } .story-body { display: grid; gap: 20px; } .story-body p { color: var(--ink-soft); text-wrap: pretty; } .story-body p strong { color: var(--ink); font-weight: 600; } @media (max-width: 900px) { .profile-hero .wrap, .recognize .wrap, .story .wrap { grid-template-columns: 1fr; gap: 44px; } .story-side { position: static; } .profile-photo image-slot, .profile-photo .photo { height: 420px; } } /* ---------- sessões ---------- */ .sessions { padding: 96px 0; background: var(--slate-deep); color: #EDF1EE; } .sessions .eyebrow { color: var(--sage); } .sessions .eyebrow::before { background: var(--sage); } .sessions .section-head h2 { color: #F4F1EA; } .sessions .section-head p { color: rgba(237, 241, 238, 0.72); } .session-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(244, 241, 234, 0.16); } .session-fact { padding: 30px 30px 6px 0; border-right: 1px solid rgba(244, 241, 234, 0.16); display: grid; gap: 8px; align-content: start; } .session-fact:last-child { border-right: none; } .session-fact .big { font-family: var(--font-display); font-size: 30px; color: #F4F1EA; line-height: 1.1; } .session-fact p { font-size: 14px; color: rgba(237, 241, 238, 0.72); } @media (max-width: 900px) { .session-facts { grid-template-columns: repeat(2, 1fr); } .session-fact { border-right: none; padding: 22px 0 6px; } } /* ---------- CTA do perfil ---------- */ .profile-cta { padding: 100px 0 60px; } .profile-cta .inner { background: var(--accent-soft); border-radius: 28px; padding: 64px 56px; display: grid; gap: 20px; justify-items: center; text-align: center; } .profile-cta h2 { font-size: clamp(28px, 3.4vw, 40px); max-width: 24ch; } .profile-cta p { color: var(--ink-soft); max-width: 52ch; text-wrap: pretty; } .profile-cta .whats-note { font-size: 13.5px; color: var(--ink-soft); } /* ---------- caminho alternativo ---------- */ .other-path { padding: 0 0 110px; } .other-path .inner { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-card); padding: 30px 36px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .other-path .label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; } .other-path h3 { font-size: 21px; } .other-path p { font-size: 14.5px; color: var(--ink-soft); } .other-path .btn { white-space: nowrap; } @media (max-width: 700px) { .other-path .inner { grid-template-columns: 1fr; } }