/* Segurança e LGPD: built on the product-page template (product.css); page styles under .p-seguranca */
.p-seguranca .sg-scr-h { padding: 18px 20px 6px; }
.p-seguranca .sg-scr-h .pp-h { font-size: 17px; line-height: 24px; }
.p-seguranca .se-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--site-line); font: 500 14px/20px var(--f-sans); }
.p-seguranca .se-row small { display: block; font: 400 12px/16px var(--f-sans); color: var(--site-ink-3); }
.p-seguranca .se-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--site-panel); border: 1px solid var(--site-line); display: grid; place-items: center; }
.p-seguranca .se-ic svg { width: 16px; height: 16px; fill: none; stroke: var(--site-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.p-seguranca .se-cpf { font: 400 12px/16px var(--f-mono); letter-spacing: .04em; color: var(--site-ink-2); }

/* floating cards */
.p-seguranca .se-qr { right: 28px; bottom: 56px; width: 236px; }
.p-seguranca .se-qr-band { background: var(--org-1); color: #fff; padding: 10px 14px; font: 600 12px/16px var(--f-sans); display: flex; justify-content: space-between; }
.p-seguranca .se-qr-band span { font: 400 10px/16px var(--f-mono); letter-spacing: .06em; opacity: .8; }
.p-seguranca .se-qr-b { display: grid; grid-template-columns: minmax(0, 1fr) 60px; gap: 12px; align-items: end; padding: 12px 14px 14px; }
.p-seguranca .se-qr-b b { display: block; font: 600 18px/22px var(--f-display); letter-spacing: -.01em; }
.p-seguranca .se-qr-b .pp-qr { width: 60px; height: 60px; }
.p-seguranca .se-sig { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--site-line); font: 400 11px/16px var(--f-mono); letter-spacing: .04em; color: var(--site-ink-2); }
.p-seguranca .se-sig svg { width: 14px; height: 14px; fill: none; stroke: var(--success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* retention */
.p-seguranca .se-ret { padding: 20px; display: grid; gap: 16px; }
.p-seguranca .se-ret-f { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; align-items: end; }
.p-seguranca .se-date { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--sol-wash); font: 500 14px/20px var(--f-sans); }
.p-seguranca .se-date svg { width: 18px; height: 18px; fill: none; stroke: var(--site-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.p-seguranca .se-two { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--site-line); }
.p-seguranca .se-two > div { padding: 16px 20px; display: grid; gap: 8px; align-content: start; }
.p-seguranca .se-two > div + div { border-left: 1px solid var(--site-line); }
.p-seguranca .se-two ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: 400 13px/18px var(--f-sans); color: var(--site-ink-2); }
.p-seguranca .se-two li { display: flex; gap: 8px; align-items: center; }
.p-seguranca .se-two li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--site-control); flex: none; }
.p-seguranca .se-two .is-keep li::before { background: var(--site-ink); }

/* audit log */
.p-seguranca .se-log > div { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--site-line); font: 400 13px/18px var(--f-sans); color: var(--site-ink-2); }
.p-seguranca .se-log time { font: 400 12px/16px var(--f-mono); color: var(--site-ink-3); }
.p-seguranca .se-log b { color: var(--site-ink); font-weight: 600; }
.p-seguranca .se-2fa { right: 28px; bottom: 40px; width: 250px; padding: 18px; display: grid; gap: 12px; }
.p-seguranca .se-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.p-seguranca .se-code i { height: 38px; border: 1px solid var(--site-control); border-radius: 8px; display: grid; place-items: center; font: 600 16px/20px var(--f-display); font-style: normal; }
.p-seguranca .se-code i:empty { border-color: var(--site-line-strong); }
.p-seguranca .se-code i.is-on { border-color: var(--site-ink); box-shadow: 0 0 0 3px rgba(14,26,58,.08); }

/* door */
.p-seguranca .se-door { position: absolute; left: 50%; top: 40px; width: 300px; margin-left: -150px; border: 2px solid var(--site-ink); border-bottom: 0; border-radius: 40px 40px 0 0; padding: 10px 10px 0; background: var(--site-bg); box-shadow: var(--sh-lg); }
.p-seguranca .se-door-in { border-radius: 30px 30px 0 0; background: var(--warning-wash); color: var(--warning); padding: 18px 20px 120px; display: grid; gap: 4px; }
.p-seguranca .se-door-top { display: flex; justify-content: space-between; font: 400 11px/16px var(--f-mono); letter-spacing: .06em; color: var(--site-ink-2); margin-bottom: 18px; }
.p-seguranca .se-door-in svg.v { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.p-seguranca .se-door-in b { font: 600 30px/34px var(--f-display); letter-spacing: -.02em; }
.p-seguranca .se-door-in span { font: 400 14px/20px var(--f-sans); color: var(--site-ink); }
.p-seguranca .se-door-in .se-door-k { margin-top: 18px; display: grid; gap: 8px; }
.p-seguranca .se-door-in .se-door-k div { display: flex; justify-content: space-between; font: 400 13px/18px var(--f-sans); color: var(--site-ink-2); padding-top: 8px; border-top: 1px solid rgba(166,61,6,.18); }
.p-seguranca .se-door-in .se-door-k div b { font: 500 13px/18px var(--f-sans); color: var(--site-ink); letter-spacing: 0; }
.p-seguranca .se-copy { left: 36px; top: 300px; width: 220px; padding: 14px; display: grid; gap: 6px; transform: rotate(-3deg); }
.p-seguranca .se-copy .pp-qr { width: 48px; height: 48px; opacity: .55; }
.p-seguranca .se-copy-t { display: flex; gap: 12px; align-items: center; font: 500 13px/18px var(--f-sans); }

/* LGPD form notice */
.p-seguranca .se-form { padding: 20px; display: grid; gap: 14px; }
.p-seguranca .se-note { font: 400 12px/18px var(--f-sans); color: var(--site-ink-2); background: var(--site-panel); border-radius: 8px; padding: 12px 14px; }
.p-seguranca .se-note b { color: var(--site-ink); font-weight: 600; }
.p-seguranca .se-dados { right: 28px; bottom: 44px; width: 260px; }
.p-seguranca .se-dados .pp-row { padding: 11px 16px; font-size: 13px; }

/* who does what */
.p-seguranca .se-roles { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--site-line); border-radius: var(--r-lg); overflow: hidden; }
.p-seguranca .se-role { padding: 36px 36px 32px; display: grid; gap: 14px; align-content: start; }
.p-seguranca .se-role + .se-role { border-left: 1px solid var(--site-line); background: var(--site-panel); }
.p-seguranca .se-role .t-h3 { margin: 0; }
.p-seguranca .se-role ul { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--site-line); }
.p-seguranca .se-role li { padding: 12px 0; border-bottom: 1px solid var(--site-line); font: 400 15px/22px var(--f-sans); color: var(--site-ink-2); }
.p-seguranca .se-role-mark { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--site-ink); }
.p-seguranca .se-role-mark svg { width: 22px; height: 22px; }
.p-seguranca .se-role + .se-role .se-role-mark { background: var(--site-bg); border: 1px solid var(--site-line); }

@container site (max-width: 1023px) {
  .p-seguranca .se-roles { grid-template-columns: minmax(0, 1fr); }
  .p-seguranca .se-role + .se-role { border-left: 0; border-top: 1px solid var(--site-line); }
}
@container site (max-width: 719px) {
  .p-seguranca .se-qr { right: 12px; bottom: 28px; width: 200px; }
  .p-seguranca .se-2fa, .p-seguranca .se-dados { right: 12px; bottom: 24px; width: 220px; }
  .p-seguranca .se-copy { display: none; }
  .p-seguranca .se-door { width: 260px; margin-left: -130px; }
  .p-seguranca .se-two { grid-template-columns: minmax(0, 1fr); }
  .p-seguranca .se-two > div + div { border-left: 0; border-top: 1px solid var(--site-line); }
  .p-seguranca .se-role { padding: 28px 20px 24px; }
  .p-seguranca .se-row { padding: 12px 16px; }
}