/* O que o seu site precisa ter: fundo preto, lista numerada à esquerda e notebook + celular em wireframe à direita. */
.tn-sf { background: #0b0b0c; color: #fff; padding-block: clamp(4rem, 8vw, 8rem); }
.tn-sf__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.tn-sf__eyebrow { margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #d2a833; }
.tn-sf__title { margin: 0; font-family: var(--tn-font-display, inherit); font-weight: 600; font-size: clamp(2rem, 1rem + 3.2vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.tn-sf__title em { font-style: normal; color: #d2a833; }
.tn-sf__list { list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; display: grid; gap: 0; }
.tn-sf__list li { display: flex; gap: 1.25rem; padding-block: 1.25rem; border-block-start: 1px solid rgba(255, 255, 255, 0.14); }
.tn-sf__list li:last-child { border-block-end: 1px solid rgba(255, 255, 255, 0.14); }
.tn-sf__n { flex: none; inline-size: 2rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; color: #d2a833; padding-block-start: 0.35rem; }
.tn-sf__list strong { display: block; font-family: var(--tn-font-display, inherit); font-weight: 600; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.2; }
.tn-sf__list small { display: block; margin-block-start: 0.4rem; font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }

.tn-sf__devices { position: relative; padding-block-end: 2rem; }
.tn-sf__laptop { inline-size: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6)); }
.tn-sf__lscreen { aspect-ratio: 16 / 10; background: #fff; border: 0.5rem solid #2a2a2d; border-block-end-width: 0.7rem; border-radius: 0.9rem 0.9rem 0.2rem 0.2rem; overflow: hidden; }
.tn-sf__lbase { block-size: 0.8rem; margin-inline: -4%; background: #c9c9cc; border-radius: 0 0 1.1rem 1.1rem / 0 0 0.8rem 0.8rem; }
.tn-sf__devices s, .tn-sf__devices u, .tn-sf__devices b, .tn-sf__devices em, .tn-sf__devices span, .tn-sf__devices i { display: block; text-decoration: none; font-style: normal; }
.tn-sf__bar { display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.6rem; background: #ecebe7; }
.tn-sf__bar b { inline-size: 0.4rem; block-size: 0.4rem; border-radius: 50%; background: #c8c6c0; }
.tn-sf__page { padding: 1rem 1.25rem; }
.tn-sf__nav { display: flex; align-items: center; gap: 0.7rem; margin-block-end: 1.1rem; }
.tn-sf__nav b { inline-size: 3.2rem; block-size: 0.6rem; background: #0b0b0c; margin-inline-end: auto; }
.tn-sf__nav u { inline-size: 1.6rem; block-size: 0.35rem; background: #d9d7d1; }
.tn-sf__nav em { inline-size: 2.6rem; block-size: 0.9rem; background: #d2a833; }
.tn-sf__hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; align-items: center; }
.tn-sf__hero s { block-size: 0.8rem; background: #0b0b0c; margin-block-end: 0.5rem; }
.tn-sf__hero s.short { inline-size: 60%; }
.tn-sf__hero em.btn { inline-size: 4.5rem; block-size: 1.2rem; background: #d2a833; margin-block-start: 0.7rem; }
.tn-sf__hero span { aspect-ratio: 4 / 3; background: #e9e5d8; }
.tn-sf__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-block-start: 1.1rem; }
.tn-sf__row s { block-size: 2.4rem; background: #f2f1ee; margin: 0; }
.tn-sf__phone { position: absolute; inset-inline-end: -0.5rem; inset-block-end: 0; inline-size: clamp(6.5rem, 22%, 9.5rem); aspect-ratio: 9 / 18.5; padding: 1.5rem 0.7rem 0.8rem; background: #fff; border: 4px solid #2a2a2d; border-radius: 1.4rem; box-shadow: 0 24px 40px -12px rgba(0, 0, 0, 0.8); display: grid; align-content: start; gap: 0.45rem; }
.tn-sf__notch { position: absolute; inset-block-start: 0.4rem; inset-inline: 32%; block-size: 0.35rem; border-radius: 999px; background: #0b0b0c; }
.tn-sf__pnav { display: flex; justify-content: space-between; align-items: center; margin-block-end: 0.3rem; }
.tn-sf__pnav b { inline-size: 2.2rem; block-size: 0.4rem; background: #0b0b0c; }
.tn-sf__pnav u { inline-size: 0.9rem; block-size: 0.3rem; background: #0b0b0c; }
.tn-sf__phone s { block-size: 0.5rem; background: #0b0b0c; }
.tn-sf__phone s.short { inline-size: 60%; }
.tn-sf__phone em.btn { inline-size: 55%; block-size: 0.9rem; background: #d2a833; }
.tn-sf__phone span { aspect-ratio: 4 / 3; background: #e9e5d8; margin-block-start: 0.3rem; }
.tn-sf__wa { position: absolute; inset-inline-end: 0.5rem; inset-block-end: 0.7rem; inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%; background: #1faa59; display: grid; place-items: center; }
.tn-sf__wa svg { inline-size: 1rem; block-size: 1rem; fill: #fff; }
@media (max-width: 899px) { .tn-sf__layout { grid-template-columns: 1fr; } .tn-sf__devices { max-inline-size: 34rem; margin-inline: auto; inline-size: 100%; } }