/* 07 · Sua marca conectada ao Natal, à casa e às famílias catarinenses — a vitrine e o letreiro.
   Palco fixado (vinho): texto no alto à esquerda (.cn-text), a vitrine em arco à direita (.cn-window: geometria da
   parada 1 medida no JS; na 2ª parte ela escala para o canto), o fio das etiquetas atravessando o palco (.cn-rope) e
   as quatro etiquetas de presente embaixo (.cn-blocks). Depois do pin, o fecho (.cn-finale): o letreiro de lâmpadas
   com a marca, a frase e o campo "Veja com a sua marca". Tudo sob #conectada. */
#conectada { --cn-top: calc(var(--top-safe) + clamp(10px, 2.4vh, 32px)); }
#conectada .cn-stage { isolation: isolate; }
/* o palco escurece embaixo (o fecho começa nesse vinho fundo: sem costura) */
#conectada .cn-stage::after { content: ''; position: absolute; inset: auto 0 0; height: 22%; z-index: 0; pointer-events: none;
  background: linear-gradient(0deg, #3e0407, rgba(62, 4, 7, 0)); }
#conectada .cn-wrap { position: relative; z-index: 2; }

/* estrela do deck: a do núcleo (.star8--corner .star8--br), no vermelho do veludo, atrás das etiquetas */
#conectada .cn-star { opacity: .9; --star8-c: #a30c12; --star8-core: #3a0508; --size: min(28vmin, 320px); right: calc(var(--size) * -.52); bottom: calc(var(--size) * -.55); }
/* menor e mais para o canto: a ponta esquerda passava sob a etiqueta "Reputação local" na parada 0,6 (1440×900) */
#conectada .cn-star__svg { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }

/* ---- texto ---- */
#conectada .cn-text { position: absolute; z-index: 3; left: var(--gutter); top: var(--cn-top); width: 56%; container-type: inline-size; }
#conectada .cn-title-wrap { position: relative; }
/* título pelo token do núcleo (.ch-title: --title-fs com teto pela coluna .cn-text, medida no JS ao lado da vitrine);
   --title-em = "CATARINENSES" (7,9 em), a palavra que não quebra. "SUA MARCA CONECTADA AO" (15 em) quebra em duas
   onde não couber. --cn-fit é a rede de segurança do JS (tela baixa): o texto nunca desce até o fio das etiquetas. */
#conectada .cn-title { --title-em: 8.1; font-size: calc(min(var(--title-fs), 100cqi / var(--title-em)) * var(--cn-fit, 1)); max-width: none; }
#conectada .cn-t1 { display: block; color: var(--cream); }
#conectada .cn-t2 { display: block; color: var(--gold); }
#conectada .cn-title .fr { font-size: 1.12em; color: var(--gold-2); }
#conectada .cn-lede { margin-top: clamp(12px, 2.2vh, 26px); max-width: 44ch; font-size: calc((clamp(17px, .78vw + 8.6px, 24px)) * var(--ts, 1)); }
/* faíscas: o piscar vai no <i> (HTML: opacidade/escala compostas), a faísca SVG dentro fica parada */
#conectada .cn-spark, #conectada .cn-fspark { display: block; width: var(--size); height: var(--size); }
#conectada .cn-spark > .sparkle, #conectada .cn-fspark > .sparkle { display: block; width: 100%; height: 100%; }
#conectada .cn-spark { position: absolute; pointer-events: none; animation: twinkle 3.6s ease-in-out infinite; }
#conectada .cn-spark--1 { --size: clamp(14px, 1.3vw, 26px); right: -1.2em; top: -.6em; }
#conectada .cn-spark--2 { --size: clamp(10px, .8vw, 16px); right: .4em; top: 42%; animation-delay: -1.8s; }
.reduced #conectada .cn-spark { animation: none; }

/* ---- a vitrine (posição e tamanho da parada 1 vêm do JS; a 2ª parte é um transform a partir dela) ---- */
#conectada .cn-window { position: absolute; z-index: 2; right: var(--gutter); top: var(--cn-top); width: 30%; aspect-ratio: .76; margin: 0; transform-origin: 100% 0; --cn-off: clamp(9px, 1.1vmin, 16px); }
#conectada .cn-win-in { position: absolute; inset: 0; }
#conectada .cn-glass { position: absolute; inset: 0; overflow: hidden; border-radius: 999px 999px 0 0; background: #4a0508; box-shadow: 0 30px 60px rgba(20, 2, 4, .5), inset 0 0 0 1px rgba(0, 0, 0, .3); }
#conectada .cn-glass img { width: 100%; height: 100%; object-fit: cover; object-position: 8% 40%; }
#conectada .cn-glass.has-missing { background: radial-gradient(60% 50% at 40% 40%, #7d0a0e, #3a0508); }
/* vidro com neve pintada nos cantos de baixo (a vitrine de Natal) */
#conectada .cn-frost { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(34% 20% at 0% 100%, rgba(255, 255, 255, .62), rgba(255, 255, 255, .22) 55%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(30% 17% at 100% 100%, rgba(255, 255, 255, .58), rgba(255, 255, 255, .2) 55%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(70% 7% at 50% 100%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 100%),
    radial-gradient(1.2% 1% at 12% 86%, rgba(255, 255, 255, .8), transparent), radial-gradient(.9% .8% at 22% 93%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1% .9% at 88% 90%, rgba(255, 255, 255, .8), transparent), radial-gradient(.8% .7% at 80% 95%, rgba(255, 255, 255, .7), transparent); }
/* reflexo de vitrine que corre na diagonal (entrada) */
#conectada .cn-sheen { position: absolute; inset: -10% -60%; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .16) 46%, rgba(255, 255, 255, .04) 52%, rgba(255, 255, 255, 0) 60%); }
/* crédito embaixo do peitoril, fora da vitrine (posição da parada 1 no JS; na 2ª parte ele acompanha o pé da janela
   sem escalar: sempre no corpo do crédito, --credit-fs) */
#conectada .cn-credit { position: absolute; z-index: 3; left: 0; top: 0; white-space: nowrap; }
/* moldura dourada fina (dois fios, arco medido no JS) */
#conectada .cn-frame { position: absolute; inset: calc(-1 * var(--cn-off)); width: calc(100% + 2 * var(--cn-off)); height: calc(100% + 2 * var(--cn-off)); max-width: none; overflow: visible; pointer-events: none; }
#conectada .cn-frame__o { fill: none; stroke: var(--gold); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(233, 162, 75, .45)); }
#conectada .cn-frame__i { fill: none; stroke: rgba(247, 201, 120, .55); stroke-width: 1; }
/* luzinhas em volta (NL.garland; a caixa passa da janela para o fio correr por fora da moldura) */
#conectada .cn-lights { position: absolute; inset: calc(-1 * var(--cn-lpad, 44px)); z-index: 3; }
/* peitoril dourado com dois presentinhos */
#conectada .cn-sill { position: absolute; z-index: 4; left: -9%; right: -9%; top: 100%; height: max(10px, 2.6%); border-radius: 3px;
  background: linear-gradient(180deg, #ffe2a6, #e9a24b 30%, #b9772c 70%, #7a4a14); box-shadow: 0 10px 22px rgba(20, 2, 4, .5); }
#conectada .cn-gift { position: absolute; bottom: calc(100% - var(--size) * .23); }
#conectada .cn-gift--1 { --size: calc(var(--cn-ww, 300px) * .2); right: 2%; }
#conectada .cn-gift--2 { --size: calc(var(--cn-ww, 300px) * .14); right: 25%; --gift-ry: -20deg; }

/* ---- o fio e as etiquetas ---- */
#conectada .cn-rope { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#conectada .cn-blocks { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: clamp(18px, 4.2vh, 56px); margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(14px, 1.8vw, 34px); align-items: end; }
#conectada .cn-b { position: relative; min-width: 0; --string: 60px; container-type: inline-size; }
/* pivô de tudo o que balança: o ponto do fio (topo do barbante) */
#conectada .cn-drop, #conectada .cn-sw { position: relative; transform-origin: 50% calc(var(--string) * -1); }
#conectada .cn-tag { min-width: 0; padding: 2.5em 1.1em 1.25em; gap: .45em; font-size: min(calc((clamp(14px, .42vw + 9.2px, 18px)) * var(--ts, 1)), 6.9cqi); }
/* "EXPERIÊNCIA E CRM" ≈ 11,6 em: teto pela largura da etiqueta (a coluna para de crescer no --maxw) */
#conectada .cn-h { color: var(--wine); font-size: min(calc((clamp(16px, 1.05vw + 3px, 25px)) * var(--ts, 1)), 7.2cqi); white-space: nowrap; }
#conectada .cn-tag .body { font-size: 1em; line-height: 1.42; color: var(--ink-2); max-width: 28ch; }

/* ---- o fecho: o letreiro ---- */
#conectada .cn-finale { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: grid; align-items: center;
  padding: calc(var(--top-safe) + clamp(40px, 9vh, 130px)) 0 clamp(36px, 7vh, 90px);
  background:
    radial-gradient(60% 46% at 50% 52%, rgba(233, 162, 75, .12), rgba(233, 162, 75, 0) 70%),
    linear-gradient(180deg, #3e0407 0%, rgba(62, 4, 7, 0) 30%),
    var(--velvet-grain), var(--velvet-streaks), var(--wine); }
#conectada .cn-festoon { position: absolute; left: 0; right: 0; top: calc(var(--top-safe) - 6px); height: clamp(90px, 16vh, 220px); z-index: 1; }
#conectada .cn-fwrap { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: clamp(20px, 4vh, 48px); }
#conectada .cn-closing { display: grid; justify-items: center; gap: clamp(8px, 2vh, 26px); width: 100%; margin: 0; }
#conectada .cn-mq { width: min(100%, calc(var(--maxw) * .88)); --mq-max: calc(136px * var(--ts, 1)); }
#conectada .cn-rest { font-size: min(calc((clamp(28px, 3.3vw, 64px)) * var(--ts, 1)), calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) / 19)); line-height: 1.06; max-width: 22em; text-wrap: balance; color: var(--gold); }
#conectada .cn-rest .fr { font-size: 1.12em; color: var(--gold-2); }
#conectada .cn-fspark { position: absolute; pointer-events: none; animation: twinkle 3.4s ease-in-out infinite; }
#conectada .cn-fspark--1 { --size: clamp(16px, 1.6vw, 30px); left: 8%; top: 12%; }
#conectada .cn-fspark--2 { --size: clamp(12px, 1.1vw, 22px); right: 9%; top: 30%; animation-delay: -1.2s; }
#conectada .cn-fspark--3 { --size: clamp(10px, .9vw, 18px); left: 15%; bottom: 20%; animation-delay: -2.3s; }
.reduced #conectada .cn-fspark { animation: none; }

/* campo "Veja com a sua marca": discreto, uma cápsula com fio dourado */
#conectada .cn-form { display: grid; justify-items: center; gap: 8px; margin-top: clamp(4px, 1vh, 14px); }
#conectada .cn-form__l { font-family: var(--f-body); font-weight: 600; font-size: calc(13px * var(--ts, 1)); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
#conectada .cn-form__row { display: flex; align-items: stretch; gap: 0; border-radius: 999px; background: rgba(46, 3, 5, .6); box-shadow: inset 0 0 0 1.5px rgba(233, 162, 75, .5); }
#conectada .cn-form__in { width: min(62vw, calc(272px * var(--ts, 1))); min-height: calc(42px * var(--ts, 1)); padding: 2px 18px 0 22px; border: 0; background: none; color: var(--cream); font: 500 calc(16px * var(--ts, 1)) / 1.2 var(--f-body); letter-spacing: .01em; outline: none; border-radius: 999px 0 0 999px; }
#conectada .cn-form__in::placeholder { color: rgba(255, 244, 226, .62); }
#conectada .cn-form__in:focus-visible { box-shadow: inset 0 0 0 2px var(--gold-2); }
#conectada .cn-form__go { padding: 2px 20px 0; border-radius: 0 999px 999px 0; font-family: var(--f-display); font-weight: 700; font-size: calc(14px * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--pine-3); background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
#conectada .cn-form__go:hover { filter: brightness(1.06); }
#conectada .cn-form__hint { font-size: calc(13px * var(--ts, 1)); color: var(--text-2); }

/* em pé (tablet): texto em largura cheia; a vitrine embaixo dele, no meio (geometria no JS) */
@media (orientation: portrait) {
  #conectada .cn-h { white-space: normal; text-wrap: balance; }
}