/* Dobra "Garantia Escudo de Proteção" · © 2026 Upward Creative Academy · licenciada para uso em sites de clientes (proibido revender ou redistribuir). Adaptada para a OneJohn. */
.upw-sec-shield {
  --upw-bg: #121212; --upw-cyan: #d59a60; --upw-blue: #0b8a55; --upw-risk: #e8604c;
  --upw-text: #fdf8eb; --upw-soft: #d9cdb8; --upw-muted: #a39b8c; --upw-hud: #f0c08a; --upw-line: rgba(253, 248, 235, .14);
  --upw-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --upw-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --upw-c1: color-mix(in srgb, var(--upw-cyan) 9%, transparent); --upw-c3: color-mix(in srgb, var(--upw-cyan) 32%, transparent);
  --upw-c6: color-mix(in srgb, var(--upw-cyan) 60%, transparent); --upw-g: color-mix(in srgb, var(--upw-bg) 86%, transparent);
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; display: block; box-sizing: border-box;
  width: 100%; margin: 0; padding: clamp(56px, 5vw, 88px) clamp(20px, 5vw, 48px); color: var(--upw-text); text-align: left;
  background: radial-gradient(circle var(--upw-gr, 420px) at var(--upw-gx, 50%) var(--upw-gy, 50%), color-mix(in srgb, var(--upw-blue) 17%, transparent), transparent), var(--upw-bg);
  font: 400 16px/1.5 var(--upw-font); -webkit-font-smoothing: antialiased;
}
.upw-sec-shield *, .upw-sec-shield *::before, .upw-sec-shield *::after { box-sizing: border-box; }
.upw-sec-shield::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--upw-c6), transparent); }
/* camadas do campo de força (posição e tamanho vêm do script) */
.upw-sh-grid, .upw-sh-fx, .upw-sh-fxl, .upw-sh-wave, .upw-sh-risk { position: absolute; left: 0; top: 0; z-index: -1; display: block; pointer-events: none; }
.upw-sh-grid { opacity: 0; will-change: transform; }
/* anel da onda (sombra leve de propósito: sombra grande trava celular fraco) */
.upw-sh-wave { display: none; border: 2px solid var(--upw-cyan); border-radius: 50%; opacity: 0; box-shadow: 0 0 12px var(--upw-c3); background: radial-gradient(closest-side, transparent 80%, var(--upw-c1) 95%, var(--upw-c3)); }
.upw-sh-risk { opacity: 0; color: var(--upw-risk); will-change: transform, opacity; }
.upw-sh-risk i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(currentColor 2.8px, color-mix(in srgb, currentColor 24%, transparent) 3.4px 8px, transparent 8.6px); }
.upw-sh-risk i::after { content: ''; position: absolute; inset: 0; border: 1.5px solid; border-radius: 50%; opacity: 0; }
/* etiqueta acima do ponto (abaixo nos riscos de baixo) */
.upw-sh-risk b {
  position: absolute; left: 0; bottom: 11px; display: block; margin: 0; padding: 4px 9px; white-space: nowrap; color: inherit; transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent); border-radius: 99px; background: var(--upw-g); font: 600 11px/1.15 var(--upw-mono); letter-spacing: 0; text-transform: none;
}
.upw-sh-dn b { bottom: auto; top: 11px; }
.upw-sh-risk b::after { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.upw-sh-x b::after { transform: none; }
.upw-sh-x i::after { animation: upw-shield-pop .6s ease-out; }
.upw-sh-z { color: var(--upw-cyan); }

.upw-sh-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "vis" "body"; gap: 8px; max-width: 1200px; margin: 0 auto; }
.upw-sh-head { grid-area: head; justify-self: center; max-width: 640px; text-align: center; }
.upw-sec-shield .upw-sh-eye {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 7px 14px 7px 11px; border: 1px solid var(--upw-c3);
  border-radius: 99px; background: var(--upw-c1); color: var(--upw-cyan); font: 600 12px/1.2 var(--upw-mono); letter-spacing: .16em; text-transform: uppercase;
}
.upw-sh-ping, .upw-sh-dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--upw-cyan); box-shadow: 0 0 10px var(--upw-cyan); }
.upw-sh-ping::after { content: ''; position: absolute; inset: -1px; border: 1px solid var(--upw-cyan); border-radius: 50%; opacity: 0; }
.upw-sec-shield .upw-sh-title { margin: 0; padding: 0; color: var(--upw-text); font: 700 clamp(34px, 3.7vw, 56px)/1.04 var(--upw-font); letter-spacing: -.035em; text-transform: none; text-wrap: balance; }
.upw-sh-hl { position: relative; display: inline-block; color: var(--upw-cyan); background: linear-gradient(95deg, var(--upw-cyan), #f0c08a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.upw-sh-hl::after { content: ''; position: absolute; left: 2%; right: 2%; bottom: -.03em; height: .065em; border-radius: 99px; background: linear-gradient(90deg, var(--upw-cyan), var(--upw-blue)); box-shadow: 0 0 16px var(--upw-cyan); transform-origin: left; }
.upw-sec-shield .upw-sh-lead { max-width: 34em; margin: 16px auto 0; padding: 0; color: var(--upw-muted); font: 400 clamp(16px, 1.3vw, 18px)/1.6 var(--upw-font); }

/* escudo + painel em volta */
.upw-sh-vis { grid-area: vis; position: relative; justify-self: center; width: 100%; max-width: 540px; aspect-ratio: 1 / 1.08; margin: 6px 0; container-type: inline-size; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.upw-sh-core { position: absolute; left: 50%; top: 50%; width: 56%; transform: translate(-50%, -50%); }
.upw-sec-shield .upw-sh-btn, .upw-sec-shield .upw-sh-btn:hover, .upw-sec-shield .upw-sh-btn:focus {
  -webkit-appearance: none; appearance: none; position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: inherit; font: inherit; cursor: pointer; outline: none;
}
.upw-sec-shield .upw-sh-btn:focus-visible { outline: 2px solid var(--upw-cyan); outline-offset: 6px; }
.upw-sh-glow { position: absolute; inset: 2%; border-radius: 50%; background: radial-gradient(closest-side, var(--upw-c3), transparent); opacity: .45; transition: opacity .7s; }
.upw-sh-chg .upw-sh-glow { opacity: .85; }
.upw-sh-boom .upw-sh-glow { opacity: 1; transition-duration: .08s; }
.upw-sh-bob { position: absolute; left: 12.5%; top: 6.5%; width: 75%; height: 87%; }
.upw-sh-tilt, .upw-sh-svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.upw-sh-glass { fill: var(--upw-g); }
.upw-sh-f1 { stop-color: color-mix(in srgb, var(--upw-cyan) 22%, var(--upw-bg)); stop-opacity: .92; }
.upw-sh-f2 { stop-color: var(--upw-bg); stop-opacity: .86; }
.upw-sh-f3 { stop-color: color-mix(in srgb, var(--upw-blue) 18%, var(--upw-bg)); stop-opacity: .92; }
.upw-sh-s1 { stop-color: var(--upw-cyan); }
.upw-sh-s2 { stop-color: var(--upw-blue); }
.upw-sh-inner, .upw-sh-edge, .upw-sh-gloss, .upw-sh-lock { fill: none; stroke: var(--upw-cyan); stroke-linecap: round; stroke-linejoin: round; }
.upw-sh-inner { stroke-width: 1.2; stroke-dasharray: .012 .01; opacity: .45; }
.upw-sh-edge { stroke-width: 3.2; stroke-dasharray: 1; }
.upw-sh-gloss { stroke: #fff; stroke-width: 1.6; opacity: .5; }
.upw-sh-lock { stroke-width: 2.2; }
.upw-sh-n { fill: #fff; font: 800 100px var(--upw-font); letter-spacing: -4px; }
.upw-sh-d { fill: var(--upw-soft); font: 700 15px var(--upw-mono); letter-spacing: 6px; }
.upw-sh-scan { position: absolute; inset: 0; overflow: hidden; opacity: 0; clip-path: polygon(50% 3.4%, 90% 15.5%, 90% 44.8%, 87% 61.5%, 78.6% 75.4%, 66% 86.8%, 50% 95.7%, 34% 86.8%, 21.4% 75.4%, 13% 61.5%, 10% 44.8%, 10% 15.5%); }
.upw-sh-scan::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16%; transform: translateY(-110%); background: linear-gradient(transparent, var(--upw-c1) 80%, var(--upw-c6) 97%, transparent); }
.upw-sh-hud { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
.upw-sh-top { top: 0; }
.upw-sh-bot { bottom: 0; align-items: flex-end; }
.upw-sec-shield .upw-sh-tag, .upw-sec-shield .upw-sh-meter { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; color: var(--upw-hud); font: 600 11px/1.3 var(--upw-mono); letter-spacing: .14em; text-transform: uppercase; }
.upw-sec-shield .upw-sh-tag { padding: 6px 11px; border: 1px solid var(--upw-line); border-radius: 99px; background: var(--upw-g); font-size: 10px; letter-spacing: .12em; }
.upw-sh-meter.upw-sh-meter { display: block; padding: 8px 14px 9px; border: 1px solid var(--upw-line); border-radius: 14px; background: var(--upw-g); color: var(--upw-muted); font-size: 10.5px; }
.upw-sh-count { display: block; margin-top: 4px; color: var(--upw-text); font: 600 18px/1 var(--upw-mono); letter-spacing: .06em; }
.upw-sec-shield .upw-sh-pause, .upw-sec-shield .upw-sh-pause:hover, .upw-sec-shield .upw-sh-pause:focus {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; margin: 0; padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, .26); border-radius: 99px; background: var(--upw-g); box-shadow: none; color: var(--upw-soft);
  font: 600 11px/1 var(--upw-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; pointer-events: auto; outline: none;
}
.upw-sec-shield .upw-sh-pause:hover { border-color: var(--upw-c6); color: var(--upw-text); }
.upw-sec-shield .upw-sh-pause:focus-visible { outline: 2px solid var(--upw-cyan); outline-offset: 3px; }
.upw-sh-pause svg { width: 12px; height: 12px; fill: currentColor; }
.upw-sh-pause[aria-pressed="true"] > .upw-sh-ipa, .upw-sh-pause[aria-pressed="false"] > .upw-sh-ipl { display: none; }
.upw-sh-hint {
  position: absolute; left: 50%; top: 80%; top: calc(50% + 31cqw); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--upw-c3); border-radius: 99px; background: var(--upw-g); color: #f0c08a; white-space: nowrap; pointer-events: none;
  font: 600 10.5px/1 var(--upw-mono); letter-spacing: .14em; text-transform: uppercase;
}
.upw-sh-hint i { width: 9px; height: 9px; border: 1.5px solid; border-radius: 50%; }
.upw-sec-shield:not(.upw-sh-js) .upw-sh-bot, .upw-sec-shield:not(.upw-sh-js) .upw-sh-hint { display: none; }
.upw-sh-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* cartões e botão */
.upw-sh-body { grid-area: body; justify-self: center; width: 100%; max-width: 640px; }
.upw-sec-shield .upw-sh-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.upw-sec-shield .upw-sh-card {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; margin: 0; padding: 12px 16px; overflow: hidden;
  list-style: none; border: 1px solid var(--upw-line); border-radius: 16px; background: linear-gradient(rgba(35, 35, 33, .85), rgba(27, 27, 26, .6)); transition: border-color .3s;
}
/* brilho quando a onda do escudo passa pelo cartão */
.upw-sh-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 1px var(--upw-cyan), inset 0 0 28px var(--upw-c3); transition: opacity .8s; }
.upw-sh-hit::after { opacity: 1; transition-duration: .1s; }
@media (hover: hover) { .upw-sec-shield .upw-sh-card:hover { border-color: var(--upw-c3); } }
.upw-sh-ico { display: grid; place-items: center; width: 44px; height: 48px; color: var(--upw-cyan); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, var(--upw-c3), color-mix(in srgb, var(--upw-blue) 12%, transparent)); }
.upw-sh-ico svg, .upw-sh-cta svg, .upw-sh-safe svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.upw-sh-ct { display: block; margin: 0; color: var(--upw-text); font: 600 16px/1.3 var(--upw-font); letter-spacing: -.01em; }
.upw-sh-cd { display: block; margin: 2px 0 0; color: var(--upw-muted); font: 400 14px/1.45 var(--upw-font); }
.upw-sh-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; margin-top: 22px; }
.upw-sec-shield .upw-sh-cta, .upw-sec-shield .upw-sh-cta:hover, .upw-sec-shield .upw-sh-cta:focus, .upw-sec-shield .upw-sh-cta:visited {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin: 0; padding: 0 28px; overflow: hidden;
  border: 0; border-radius: 99px; background: linear-gradient(100deg, var(--upw-cyan), #f0c08a); color: #1a1007; font: 700 16px/1.1 var(--upw-font);
  text-decoration: none; text-transform: none; box-shadow: 0 12px 32px -12px var(--upw-c6), inset 0 1px 0 rgba(255, 255, 255, .5); outline: none; transition: transform .3s, box-shadow .3s;
}
.upw-sh-cta::before { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-120%) skewX(-20deg); transition: transform .7s; }
.upw-sh-cta svg { position: relative; width: 18px; height: 18px; stroke-width: 2.4; transition: transform .3s; }
.upw-sec-shield .upw-sh-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px var(--upw-cyan), inset 0 1px 0 rgba(255, 255, 255, .6); }
.upw-sh-cta:hover::before { transform: translateX(560%) skewX(-20deg); }
.upw-sh-cta:hover svg { transform: translateX(4px); }
.upw-sec-shield .upw-sh-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.upw-sec-shield .upw-sh-safe { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; color: var(--upw-muted); font: 500 13px/1.4 var(--upw-font); }
.upw-sh-safe svg { width: 15px; height: 15px; color: var(--upw-cyan); stroke-width: 2; }

/* computador: escudo à esquerda e texto à direita; tablet: cartões lado a lado */
@container (min-width: 900px) {
  .upw-sec-shield .upw-sh-wrap { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "vis ." "vis head" "vis body" "vis ."; column-gap: clamp(40px, 5.5cqw, 80px); row-gap: 0; align-items: center; }
  .upw-sec-shield .upw-sh-head { justify-self: start; margin-bottom: 22px; text-align: left; }
  .upw-sec-shield .upw-sh-lead { margin-left: 0; }
  .upw-sec-shield .upw-sh-vis { aspect-ratio: 1; margin: 0; }
  .upw-sec-shield .upw-sh-body { justify-self: start; }
  .upw-sec-shield .upw-sh-act { justify-content: flex-start; }
}
@container (min-width: 600px) and (max-width: 899.98px) {
  .upw-sec-shield .upw-sh-body { max-width: 760px; }
  .upw-sec-shield .upw-sh-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .upw-sec-shield .upw-sh-card { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; padding: 18px; }
}
@container (max-width: 599.98px) {
  .upw-sec-shield .upw-sh-cta { width: 100%; }
}

/* entrada (só com JS) e animações contínuas (só com a dobra na tela) */
.upw-sh-js .upw-sh-r { opacity: 0; transform: translateY(22px); }
.upw-sh-go .upw-sh-r { opacity: 1; transform: none; transition: opacity .8s, transform 1s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--upw-d, 0) * 90ms); }
.upw-sh-js .upw-sh-btn { opacity: 0; transform: scale(.86); }
.upw-sh-go .upw-sh-btn { opacity: 1; transform: none; transition: opacity .7s, transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.upw-sh-js .upw-sh-edge { stroke-dashoffset: 1; }
.upw-sh-go .upw-sh-edge { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) .15s; }
.upw-sh-js .upw-sh-hl::after { transform: scaleX(0); }
.upw-sh-go .upw-sh-hl::after { transform: none; transition: transform .9s cubic-bezier(.65, 0, .35, 1) .8s; }
.upw-sh-js .upw-sh-hud, .upw-sh-js .upw-sh-hint { opacity: 0; }
.upw-sh-go .upw-sh-hud, .upw-sh-go .upw-sh-hint { opacity: 1; transition: opacity .8s .9s; }
.upw-sh-on .upw-sh-bob { animation: upw-shield-bob 6s ease-in-out infinite; }
.upw-sh-on .upw-sh-scan { opacity: 1; }
.upw-sh-on .upw-sh-scan::before { animation: upw-shield-scan 3.8s cubic-bezier(.45, 0, .55, 1) infinite; }
.upw-sh-on .upw-sh-ping::after { animation: upw-shield-ping 2s ease-out infinite; }
.upw-sh-on .upw-sh-hint i { animation: upw-shield-blink 1.6s ease-in-out infinite; }
@keyframes upw-shield-bob { 50% { transform: translateY(-7px); } }
@keyframes upw-shield-scan { from { transform: translateY(-110%); } 70%, to { transform: translateY(640%); } }
@keyframes upw-shield-ping { from { opacity: .9; } to { opacity: 0; transform: scale(3.2); } }
@keyframes upw-shield-pop { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(2.8); } }
@keyframes upw-shield-blink { 50% { opacity: .5; transform: scale(.55); } }
@media (prefers-reduced-motion: reduce) {
  .upw-sec-shield *, .upw-sec-shield *::before, .upw-sec-shield *::after { animation: none !important; }
  .upw-sh-js .upw-sh-r, .upw-sh-js .upw-sh-btn { transform: none !important; }
  .upw-sh-go .upw-sh-r, .upw-sh-go .upw-sh-btn { transition: opacity .5s !important; }
  .upw-sh-js .upw-sh-edge { stroke-dashoffset: 0; transition: none; }
  .upw-sh-js .upw-sh-hl::after { transform: none; transition: none; }
  .upw-sec-shield .upw-sh-pause { display: none; }
}
.upw-sec-shield .upw-sh-title { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .95; font-size: clamp(42px, 5.2vw, 72px); }
.upw-sh-check { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }