/* Channel placement behind the campaign peel: a compact interface around the
   iPhone. Header (official platform mark, name, play), format chips with the ad
   label, the client chip, the phone with one numbered point and the finger on
   tap frames, and the three-step journey bar synced to the storyboard. */
:is(#laboratorio,.lab-escopo) .sp-peel-underlay{background:#ecf0e7;align-items:stretch;justify-content:flex-start}
:is(#laboratorio,.lab-escopo) .cx-player{position:relative;z-index:2;width:100%;box-sizing:border-box;padding:clamp(14px,3vw,24px) clamp(14px,3vw,24px) 6px;color:#17362a;touch-action:pan-y;cursor:default;overflow-x:clip;container-type:inline-size;container-name:cx}
:is(#laboratorio,.lab-escopo) .cx-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
:is(#laboratorio,.lab-escopo) .cx-brand{display:flex;align-items:center;gap:10px;min-width:0;margin:0;color:#17362a;font:650 17px/1.2 var(--sans,Inter,Arial,sans-serif);letter-spacing:-.015em}
:is(#laboratorio,.lab-escopo) .cx-brand b{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#laboratorio,.lab-escopo) .cx-logo{display:block;flex:none;width:auto;height:22px}
:is(#laboratorio,.lab-escopo) .cx-play{display:inline-flex;flex:none;align-items:center;gap:7px;min-width:44px;min-height:44px;padding:0 15px 0 12px;border:1px solid #bccdb9;border-radius:999px;background:#f9fbf6;color:#234530;font:600 13px/1 var(--sans,Inter,Arial,sans-serif);cursor:pointer}
:is(#laboratorio,.lab-escopo) .cx-play svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:is(#laboratorio,.lab-escopo) .cx-play[aria-pressed="false"] svg path[d^="M8 5.5v13l"],:is(#laboratorio,.lab-escopo) .cx-play:not([aria-pressed]) svg path[d^="M8 5.5v13l"]{fill:currentColor}
/* Formats: one segmented control with a sliding thumb (lab: smiile-segmented-control).
   Labels never wrap; a row that cannot fit scrolls inside itself. */
:is(#laboratorio,.lab-escopo) .cx-placements{position:relative;display:flex;gap:2px;margin:10px 0 0;padding:3px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:14px;background:#dfe6d8;box-shadow:inset 0 0 0 1px #cfd9ca}
:is(#laboratorio,.lab-escopo) .cx-placements::-webkit-scrollbar{display:none}
:is(#laboratorio,.lab-escopo) .cx-thumb{position:absolute;top:3px;bottom:3px;left:0;z-index:0;width:0;border-radius:11px;background:#1e4530;box-shadow:0 0 0 1.5px var(--ch,#1e4530),0 4px 12px -6px #0b2015;transition:transform .45s cubic-bezier(.16,1,.3,1),width .4s cubic-bezier(.16,1,.3,1)}
:is(#laboratorio,.lab-escopo) .cx-thumb.is-instant{transition:none}
:is(#laboratorio,.lab-escopo) .cx-placement{position:relative;z-index:1;display:inline-flex;flex:1 1 auto;align-items:center;justify-content:center;min-height:44px;padding:0 12px;white-space:nowrap;border:0;border-radius:11px;background:transparent;color:#3f5c46;font:600 13px/1.2 var(--sans,Inter,Arial,sans-serif);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s}
:is(#laboratorio,.lab-escopo) .cx-placement[aria-pressed="true"],:is(#laboratorio,.lab-escopo) .cx-placement--static{color:#f8fbf7}
:is(#laboratorio,.lab-escopo) .cx-placement:hover:not([aria-pressed="true"]):not(.cx-placement--static){color:#17362a;background:#ffffff73}
:is(#laboratorio,.lab-escopo) .cx-placement--static{cursor:default}
:is(#laboratorio,.lab-escopo) .cx-placement:focus-visible{outline-offset:-3px!important}
/* Client chip and ad label share one line, wrapping when they must. */
:is(#laboratorio,.lab-escopo) .cx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 12px}
:is(#laboratorio,.lab-escopo) .cx-label{display:inline-flex;flex:none;align-items:center;gap:6px;min-height:30px;padding:0 11px;white-space:nowrap;border-radius:999px;background:#fff;color:#2b3e31;font:600 12px/1.2 var(--sans,Inter,Arial,sans-serif);box-shadow:inset 0 0 0 1px #c9d4c4}
:is(#laboratorio,.lab-escopo) .cx-label::before{content:"";width:7px;height:7px;border-radius:50%;background:#b8660f}
:is(#laboratorio,.lab-escopo) .cx-label[data-kind="organic"]::before{background:#3f7d4f}
:is(#laboratorio,.lab-escopo) .cx-client{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;min-height:30px;white-space:nowrap;padding:3px 11px 3px 4px;border-radius:999px;background:#f4f6ef;color:#3d4639;font:500 12.5px/1.3 var(--sans,Inter,Arial,sans-serif);box-shadow:inset 0 0 0 1px #c9d4c4}
:is(#laboratorio,.lab-escopo) .cx-client>span{overflow:hidden;text-overflow:ellipsis}
:is(#laboratorio,.lab-escopo) .cx-client b{font-weight:650;color:#26372b}
:is(#laboratorio,.lab-escopo) .cx-client .cm-mark{display:grid;flex:none;place-items:center;width:22px;height:22px;overflow:hidden;border-radius:50%;background:var(--c)}
:is(#laboratorio,.lab-escopo) .cx-client .cm-mark svg{width:72%;height:72%}
/* Phone first: the journey bar sits over the phone, the note under it. From a
   560px container the journey and the note move beside the phone. */
:is(#laboratorio,.lab-escopo) .cx-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"steps" "stage" "side";justify-items:center;gap:12px}
:is(#laboratorio,.lab-escopo) .cx-steps{grid-area:steps;width:100%;max-width:340px;min-width:0}
:is(#laboratorio,.lab-escopo) .cx-stage-col{grid-area:stage}
:is(#laboratorio,.lab-escopo) .cx-side{grid-area:side}
@container cx (min-width:560px){
 :is(#laboratorio,.lab-escopo) .cx-body{grid-template-columns:300px minmax(0,1fr);grid-template-areas:"stage steps" "stage side";grid-template-rows:auto 1fr;justify-items:stretch;align-items:start;gap:0 26px}
 :is(#laboratorio,.lab-escopo) .cx-steps{max-width:none}
}
/* The iPhone is sized by its column (never scaled with transform): up to 320px
   wide alone, 300px beside the journey. Its screen keeps 412 x 895.2 logical px. */
:is(#laboratorio,.lab-escopo) .cx-stage-col{width:100%;max-width:320px;min-width:0}
:is(#laboratorio,.lab-escopo) .cx-stage{position:relative;display:block;width:100%;border-radius:16% / 7.7%;touch-action:pan-y;cursor:pointer}
:is(#laboratorio,.lab-escopo) .cx-stage>.ch-iphone{max-width:none}
:is(#laboratorio,.lab-escopo) .cx-side{width:100%;min-width:0}
/* The numbered point of the active step, on the element it describes. */
:is(#laboratorio,.lab-escopo) .cx-dot{position:absolute;z-index:6;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#294c36;color:#fff;font:700 13px/1 var(--sans,Inter,Arial,sans-serif);box-shadow:0 0 0 2px #fff,0 4px 10px #0005;transform:translate(-50%,-50%);pointer-events:none;transition:left .35s cubic-bezier(.16,1,.3,1),top .35s cubic-bezier(.16,1,.3,1)}
:is(#laboratorio,.lab-escopo) .cx-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 2px #294c36;opacity:0}
:is(#laboratorio,.lab-escopo) .cx-dot.is-ping::after{animation:cx-ping .9s ease-out 1}
@keyframes cx-ping{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.6);opacity:0}}
/* The finger: appears on the CTA, presses it and leaves a ripple. */
:is(#laboratorio,.lab-escopo) .cx-tap{position:absolute;z-index:7;width:36px;height:36px;border-radius:50%;background:rgb(255 255 255 / .55);box-shadow:0 0 0 2px #fff,0 4px 14px #0006;transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none}
:is(#laboratorio,.lab-escopo) .cx-tap::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 2px #fff;opacity:0}
:is(#laboratorio,.lab-escopo) .cx-tap.is-on{animation:cx-tap .5s cubic-bezier(.16,1,.3,1) forwards}
:is(#laboratorio,.lab-escopo) .cx-tap.is-on::after{animation:cx-ripple .42s ease-out .16s 1}
@keyframes cx-tap{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}32%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:.9;transform:translate(-50%,-50%) scale(.92)}}
@keyframes cx-ripple{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.8);opacity:0}}
:is(#laboratorio,.lab-escopo) .cx-tap.is-static,:is(#laboratorio,.lab-escopo) .cx-tap.is-static.is-on{animation:none;opacity:1;transform:translate(-50%,-50%);background:rgb(255 255 255 / .35);box-shadow:0 0 0 3px #fff,0 0 0 5px #294c36}
/* Journey: Atenção, Retenção, Conversão. Under 560px a story-like bar of three
   segments over the phone (lab: smiile-chips-progresso), the active step's line
   under it; from 560px a list beside the phone. State never relies on colour alone. */
:is(#laboratorio,.lab-escopo) .cx-journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
:is(#laboratorio,.lab-escopo) .cx-journey li{min-width:0}
:is(#laboratorio,.lab-escopo) .cx-journey button{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;padding:9px 4px 4px;border:0;border-radius:10px;background:transparent;color:#5f6a5a;text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:is(#laboratorio,.lab-escopo) .cx-journey button:hover{background:#e3eadb}
:is(#laboratorio,.lab-escopo) .cx-step-n{display:grid;flex:none;place-items:center;width:20px;height:20px;border:1.5px solid #8fa886;border-radius:50%;background:transparent;color:#4f6350;font:650 11px/1 var(--sans,Inter,Arial,sans-serif)}
:is(#laboratorio,.lab-escopo) .cx-step-t{display:grid;gap:1px;min-width:0}
:is(#laboratorio,.lab-escopo) .cx-step-t b{overflow:hidden;color:#3b4c3e;font:600 13px/1.3 var(--sans,Inter,Arial,sans-serif);text-overflow:ellipsis;white-space:nowrap}
:is(#laboratorio,.lab-escopo) .cx-step-t small{display:none;color:#5f6a5a;font:400 12.5px/1.35 var(--sans,Inter,Arial,sans-serif)}
:is(#laboratorio,.lab-escopo) .cx-rail{position:absolute;top:0;left:4px;right:4px;height:3px;overflow:hidden;border-radius:3px;background:#d3dccd}
:is(#laboratorio,.lab-escopo) .cx-rail i{display:block;width:100%;height:100%;background:#294c36;transform:scaleX(var(--p,0));transform-origin:left}
:is(#laboratorio,.lab-escopo) .cx-journey li[data-state="on"] .cx-step-n{border-color:#294c36;background:#294c36;color:#fff}
:is(#laboratorio,.lab-escopo) .cx-journey li[data-state="on"] .cx-step-t b{color:#17362a;font-weight:700}
:is(#laboratorio,.lab-escopo) .cx-journey li[data-state="on"] .cx-step-t small{color:#2e4535}
:is(#laboratorio,.lab-escopo) .cx-journey li[data-state="done"] .cx-step-n{border-color:#8fa886;background:#8fa886;color:#fff}
:is(#laboratorio,.lab-escopo) .cx-journey li[data-state="done"] .cx-rail i{background:#8fa886}
:is(#laboratorio,.lab-escopo) .cx-now{min-height:1.4em;margin:6px 2px 0;overflow:hidden;color:#2e4535;font:500 13px/1.4 var(--sans,Inter,Arial,sans-serif);text-align:center;text-overflow:ellipsis;white-space:nowrap}
@container cx (min-width:560px){
 :is(#laboratorio,.lab-escopo) .cx-steps{padding-top:6px}
 :is(#laboratorio,.lab-escopo) .cx-journey{grid-template-columns:minmax(0,1fr);gap:8px}
 :is(#laboratorio,.lab-escopo) .cx-journey button{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;justify-content:stretch;gap:3px 10px;min-height:72px;padding:14px 12px 12px 16px}
 :is(#laboratorio,.lab-escopo) .cx-journey li[data-state="on"] button{background:#f8faf5}
 :is(#laboratorio,.lab-escopo) .cx-step-n{width:28px;height:28px;font-size:13px}
 :is(#laboratorio,.lab-escopo) .cx-step-t b{font-size:15px;white-space:normal}
 :is(#laboratorio,.lab-escopo) .cx-step-t small{display:block;font-size:14px}
 :is(#laboratorio,.lab-escopo) .cx-rail{top:12px;bottom:12px;left:0;right:auto;width:3px;height:auto}
 :is(#laboratorio,.lab-escopo) .cx-rail i{transform:scaleY(var(--p,0));transform-origin:top}
 :is(#laboratorio,.lab-escopo) .cx-now{display:none}
}
/* The short sentence, the fine print and the contact link sit under the journey. */
:is(#laboratorio,.lab-escopo) .cx-side .sp-campaign-note-slot{display:block;flex:none!important;min-height:0}
:is(#laboratorio,.lab-escopo) .cx-side .sp-campaign-note{min-height:0;width:auto;margin:14px 0 0;padding:0 2px}
:is(#laboratorio,.lab-escopo) .sp-note-frase{margin:0;color:#1f3a2a;font:550 15px/1.45 var(--sans,Inter,Arial,sans-serif);letter-spacing:-.01em}
:is(#laboratorio,.lab-escopo) .sp-note-fine{margin:6px 0 0;color:#5f6a5a;font:400 12px/1.45 var(--sans,Inter,Arial,sans-serif)}
:is(#laboratorio,.lab-escopo) .cx-side .sp-campaign-note a{min-height:44px;padding:8px 0;font-size:14px}
/* The outgoing placement: a painted, inert copy that slides away over the new one. */
:is(#laboratorio,.lab-escopo) .cx-ghost{position:absolute;z-index:5;margin:0;overflow:hidden;background:#ecf0e7;pointer-events:none}
:is(#laboratorio,.lab-escopo) .sp-peel-underlay-kicker{display:none}
:is(#laboratorio,.lab-escopo) .cx-player button:focus-visible,:is(#laboratorio,.lab-escopo) .cx-stage:focus-visible{outline:3px solid #406fca;outline-offset:2px}
@media(max-width:440px){
 :is(#laboratorio,.lab-escopo) .cx-player{padding:12px 12px 4px}
 :is(#laboratorio,.lab-escopo) .cx-head{min-height:40px}
 :is(#laboratorio,.lab-escopo) .cx-brand{font-size:16px}
 :is(#laboratorio,.lab-escopo) .cx-play{padding:0 13px 0 10px}
}
@media(prefers-reduced-motion:reduce){:is(#laboratorio,.lab-escopo) .cx-player *,:is(#laboratorio,.lab-escopo) .cx-player *::after{transition:none!important;animation:none!important}}
body.is-paused :is(#laboratorio,.lab-escopo) .cx-player *,body.is-paused :is(#laboratorio,.lab-escopo) .cx-player *::after{transition:none!important;animation:none!important}
/* Narrow phones (320px): tighter formats, and the journey keeps the step names whole without the number circles. */
@container cx (max-width:300px){
 :is(#laboratorio,.lab-escopo) .cx-placement{padding:0 6px;font-size:12px}
 :is(#laboratorio,.lab-escopo) .cx-journey{gap:4px}
 :is(#laboratorio,.lab-escopo) .cx-step-n{display:none}
 :is(#laboratorio,.lab-escopo) .cx-step-t b{font-size:12.5px}
}