.card-swap {
  position: relative;
  width: 100%;
  height: 100%;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.card-swap-sizer {
  max-height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.card-swap-sizer > span {
  display: block;
  width: 100%;
  max-width: var(--swap-stage-w);
  aspect-ratio: var(--swap-ratio);
}

.card-swap-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--swap-stage-w);
  height: var(--swap-stage-h);
  perspective: 900px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.card-swap-slot {
  position: absolute;
  top: var(--swap-oy);
  left: var(--swap-ox);
  width: var(--swap-w);
  height: var(--swap-h);
  margin: calc(var(--swap-h) / -2) 0 0 calc(var(--swap-w) / -2);
  border-radius: var(--swap-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--swap-shadow);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-swap:focus-visible .card-swap-slot[data-front] {
  outline: 2px solid var(--swap-ink);
  outline-offset: 3px;
}

.card-swap-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: var(--swap-shade);
  opacity: 0;
  pointer-events: none;
}

.card-swap-card {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  background: var(--swap-tile);
  color: var(--swap-ink);
}

.card-swap-card-rim {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--swap-tile-edge),
    inset 0 1px 0 var(--swap-tile-highlight);
  pointer-events: none;
}

.card-swap-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
}

.card-swap-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
}

.card-swap-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--swap-badge);
}

.card-swap-title {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-swap-media {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: max(0px, calc(var(--swap-radius) - 6px));
  background: var(--swap-badge);
}

.card-swap-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.card-swap-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--swap-media-edge);
  pointer-events: none;
}


.card-swap{--swap-tile:linear-gradient(180deg,#37302c,#262221);--swap-tile-edge:#ff6a0030;--swap-tile-highlight:#feffed22;--swap-shadow:0 30px 60px -24px #000c,0 10px 24px -12px #0009;--swap-media-edge:#feffed15;--swap-ink:#feffed;--swap-badge:#feffed14;--swap-shade:#100e0c;--swap-radius:18px;max-width:850px;margin:auto}
#p2 .area-acordeao{width:100%;max-width:850px}
.card-swap-head{height:42px}
.card-swap-title{display:flex;align-items:center;overflow:visible;font-size:23px;font-weight:700}
.card-swap-title svg{height:32px;width:auto;margin-right:-2px}
.swap-copy{position:absolute;left:25px;right:25px;bottom:24px;z-index:2;opacity:0;transition:opacity .1s;pointer-events:none;text-align:left}
.text-ready .swap-copy{opacity:1;transition:opacity .2s .08s}
.swap-copy .impacto{font-size:18px;max-width:32ch}
.swap-copy .corpo{font-size:12px;line-height:1.65;max-width:none;color:#feffedd9}
.swap-copy .entregas{margin-top:16px}
.swap-copy .entregas span{font-size:10px}
.card-swap-media:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 10%,#17141488 38%,#171414fa 69%);pointer-events:none}
.card-swap-media img{object-position:center 28%}
.swap-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:10px}
.swap-controls button{border:1px solid #feffed30;border-radius:50%;width:38px;height:38px;background:#211e1e;color:#feffed;font-size:20px;cursor:pointer}
.swap-controls button:hover{border-color:#ff6a00;color:#ff6a00}
.swap-controls span{font-size:11px;color:#feffed99}
#p2 .pilares-footer{margin-top:24px}
.fundo-profundo{background:#000}
.fundo-profundo::before{background:radial-gradient(ellipse at 23% 30%,#38302b 0%,#151210 20%,transparent 48%),radial-gradient(ellipse at 85% 80%,#272424,transparent 38%)}
.fundo-profundo::after{background:radial-gradient(ellipse at center,transparent 12%,#000e 85%)}
@media(max-width:650px){.swap-copy{left:18px;right:18px;bottom:18px}.swap-copy .corpo{font-size:12.5px}.card-swap-title{font-size:21px}}
@media(prefers-reduced-motion:reduce){.swap-copy,.text-ready .swap-copy{transition:none}}

/* Flat, borderless artwork cards and lateral navigation. */
.card-swap{--swap-tile:#171414;--swap-tile-edge:transparent;--swap-tile-highlight:transparent;--swap-media-edge:transparent}
.card-swap-card-rim,.card-swap-media::after,.card-swap-media::before{display:none}
.card-swap-item{padding:0;gap:0}
.card-swap-head{height:58px;padding:0 24px;justify-content:flex-start}
.card-swap-title{gap:3px;letter-spacing:0;line-height:1.25;overflow:visible}
.card-swap-title svg{flex:none;height:32px;width:auto;margin:0}
.card-swap-title>span{display:inline-block;letter-spacing:0}
.card-swap-media{border-radius:0;background:#171414}
.card-swap-media img{height:49%;object-fit:contain;object-position:center top}
.swap-copy{bottom:24px}
#p2 .area-acordeao{position:relative}
.swap-controls{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;margin:0;pointer-events:none;z-index:5}
.swap-controls button{pointer-events:auto;border:0;background:transparent;width:44px;height:44px;font-size:28px;color:#feffedb3}
.swap-controls button:focus-visible{outline:2px solid #ff6a00;outline-offset:2px}
@media(max-width:650px){.card-swap-head{padding:0 18px}.card-swap-title{font-size:21px;gap:3px}.card-swap-media img{height:39%}.swap-controls{left:-16px;right:-16px}.swap-controls button{width:34px}}

/* Original photography, tighter wordmarks, and a visible distant spotlight. */
.card-swap-title{gap:0}
.card-swap-title svg{margin-right:-1px}
.card-swap-media img{height:100%;object-fit:cover;object-position:center 28%}
.card-swap-media::before{display:block;background:linear-gradient(180deg,transparent 8%,#17141455 30%,#171414e8 65%,#171414fc 100%)}
.fundo-profundo::before{inset:-20%;filter:blur(38px);background:radial-gradient(ellipse 36% 45% at 28% 36%,#514942 0%,#302b28 26%,#151312 55%,transparent 80%),radial-gradient(ellipse 26% 34% at 78% 72%,#332d29 0%,transparent 75%);animation:foco-lento 25s ease-in-out infinite alternate}
.fundo-profundo::after{background:radial-gradient(ellipse at center,transparent 32%,#000b 95%)}
@keyframes foco-lento{0%{transform:translate3d(calc(-6% + var(--depth-x,0px)),calc(-4% + var(--depth-y,0px)),-100px) scale(1.15)}100%{transform:translate3d(calc(12% + var(--depth-x,0px)),calc(8% + var(--depth-y,0px)),-100px) scale(1.22)}}
@media(max-width:650px){.card-swap-title{gap:0}.card-swap-media img{height:100%}}
@media(prefers-reduced-motion:reduce){.fundo-profundo::before{animation:none;transform:none}}

/* Transparent service symbols layered over subdued photography. */
.card-swap-item{position:relative}
.card-swap-head{position:absolute;inset:0 0 auto;height:82px;align-items:flex-start;padding-top:18px;z-index:4;background:linear-gradient(180deg,#100e0ef2 0%,#100e0e99 55%,transparent 100%);box-sizing:border-box;pointer-events:none}
.card-swap-media{flex:none;width:100%;height:100%;background:#171414}
.card-swap-media .service-photo{opacity:.22;filter:blur(7px);transform:scale(1.06);object-fit:cover;height:100%}
.card-swap-media::before{background:linear-gradient(180deg,transparent 25%,#17141470 49%,#171414f5 79%)}
.card-swap-media .service-symbol{inset:65px auto auto 50%;width:260px;height:220px;transform:translateX(-50%);object-fit:contain;opacity:1;filter:none;z-index:2}
@media(max-width:650px){.card-swap-media .service-symbol{top:75px;width:240px;height:210px}}

/* Empty-office plates and more legible service descriptions. */
.card-swap-media .service-photo{opacity:.36}
.card-swap-title{font-size:25px}
.swap-copy .impacto{font-size:21px;line-height:1.35;border-left:3px solid #ff6a00;padding-left:13px;max-width:none}
.swap-copy .corpo{font-size:14px;line-height:1.6}
.swap-copy .entregas span{font-size:11.5px}
.card-swap-media .service-symbol{top:62px;width:235px;height:195px}
@media(max-width:650px){.card-swap-title{font-size:23px}.swap-copy .impacto{font-size:20px}.swap-copy .corpo{font-size:14px;line-height:1.5}.swap-copy .entregas{gap:6px;margin-top:12px}.swap-copy .entregas span{font-size:11px}.card-swap-media .service-symbol{top:65px;width:210px;height:175px}}

/* Stable copy reveal, centered tags and soft foreground depth. */
.swap-copy{transition:none;text-shadow:0 2px 5px #0008,0 7px 16px #0005}
.text-ready .swap-copy{transition:opacity .22s ease-out}
.swap-copy .impacto{border-left:0;padding-left:0;font-weight:800}
.card-swap-title{text-shadow:0 3px 8px #0009}
.card-swap-title svg{filter:drop-shadow(0 3px 5px #0007)}
.card-swap-media .service-symbol{filter:drop-shadow(0 9px 11px #0007)}
.swap-copy .entregas{justify-content:center;align-items:stretch;gap:6px}
.swap-copy .entregas span{text-align:center;box-shadow:0 5px 12px #0004}
.card-swap-slot[data-swap-index="1"] .entregas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.card-swap-slot[data-swap-index="1"] .entregas span{padding:6px 5px;font-size:10.5px;line-height:1.35;display:flex;align-items:center;justify-content:center}
@media(prefers-reduced-motion:reduce){.text-ready .swap-copy{transition:none}}

.swap-copy .impacto-lar{font-weight:400;font-style:normal}.swap-copy .impacto-lar strong{font-weight:800}

#p2.explorado .titulo-2{margin-bottom:12px}
#p2 .drag-hint{margin-bottom:8px}

@media(max-width:650px){
  #p2 .pilares-footer{margin-top:2px}
}