/* Pilares Safety360° — pilar e texto no mesmo eixo central */

.triad-stage {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.pillars-arcade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
  width: 100%;
  justify-content: center;
}

@media (min-width: 40rem) {
  .pillars-arcade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.25rem, 3.5vw, 2.75rem);
    row-gap: 0;
  }
}

.pillar-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  min-width: 0;
  width: 100%;
  height: 100%;
}

/* Mesma largura só na arte; texto usa a coluna inteira */
.pillar-unit {
  box-sizing: border-box;
  width: 100%;
  max-width: 16.5rem;
  margin-inline: auto;
}

.pillar-unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.pillar-unit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 6.5rem;
  height: 6.5rem;
  translate: -50% 0;
  border-radius: 999px;
  background:
    radial-gradient(
      circle,
      color-mix(in oklab, var(--triad-color, #2ea8ff) 38%, transparent) 0%,
      transparent 70%
    );
  pointer-events: none;
  z-index: 0;
}

.pillar-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(4.4rem, 7.5vw, 5.6rem);
  height: clamp(4.4rem, 7.5vw, 5.6rem);
  margin-bottom: 0.12rem;
  overflow: visible;
  color: var(--triad-color, #2ea8ff);
  filter:
    drop-shadow(0 0 12px color-mix(in oklab, var(--triad-color, #2ea8ff) 65%, transparent))
    drop-shadow(0 0 24px color-mix(in oklab, var(--triad-glow, rgba(46, 168, 255, 0.45)) 55%, transparent))
    drop-shadow(0 0 36px color-mix(in oklab, var(--triad-glow, rgba(46, 168, 255, 0.45)) 35%, transparent));
  transition: transform 280ms ease, filter 280ms ease;
}

.pillar-icon svg,
.pillar-icon img {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pillar-icon img {
  object-fit: contain;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  transform: scale(1.12);
  transform-origin: center center;
}

/* Hidrante tem mais padding na arte — amplia para igualar o peso visual */
.pillar-icon--hydrant img {
  transform: scale(1.42);
  filter: brightness(1.2) contrast(1.12) saturate(1.15);
}

.pillar-sculpt {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 9.5rem);
  height: auto;
  margin-inline: auto;
  transition: transform 320ms ease, filter 320ms ease;
  filter:
    drop-shadow(0 0 10px color-mix(in oklab, var(--triad-color, #2ea8ff) 42%, transparent))
    drop-shadow(0 0 28px color-mix(in oklab, var(--triad-glow, rgba(46, 168, 255, 0.45)) 55%, transparent))
    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45));
}

/* Metal eletrizante — alto contraste + highlight especular, só no sculpt */
.pillar-sculpt stop[stop-color="#8d8d8d"],
.pillar-sculpt stop[stop-color="#7f7f7f"],
.pillar-sculpt stop[stop-color="#7a7a7a"],
.pillar-sculpt stop[stop-color="#6e6e6e"],
.pillar-sculpt stop[stop-color="#6a6a6a"],
.pillar-sculpt stop[stop-color="#5c5c5c"] {
  stop-color: color-mix(in oklab, var(--triad-color, #2ea8ff) 72%, #02060d);
}

.pillar-sculpt stop[stop-color="#c8c8c8"],
.pillar-sculpt stop[stop-color="#d2d2d2"],
.pillar-sculpt stop[stop-color="#dcdcdc"] {
  stop-color: color-mix(in oklab, var(--triad-color, #2ea8ff) 48%, #8fa8c4);
}

.pillar-sculpt stop[stop-color="#e8e8e8"],
.pillar-sculpt stop[stop-color="#ececec"],
.pillar-sculpt stop[stop-color="#efefef"] {
  stop-color: color-mix(in oklab, var(--triad-color, #2ea8ff) 18%, #f2f8ff);
}

.pillar-sculpt stop[stop-color="#ffffff"] {
  stop-color: color-mix(in oklab, var(--triad-color, #2ea8ff) 6%, #ffffff);
}

/* Intensifica o brilho especular e o sombreamento lateral do metal */
.pillar-sculpt linearGradient[id^="pg"] stop:first-child {
  stop-opacity: 0.85;
}

.pillar-sculpt linearGradient[id^="ps"] stop:first-child {
  stop-opacity: 0.55;
}

.pillar-sculpt linearGradient[id^="ps"] stop:last-child {
  stop-opacity: 0.62;
}

.pillar-sculpt path[fill="#cfcfcf"] {
  fill: color-mix(in oklab, var(--triad-color, #2ea8ff) 45%, #6e849c);
}

.pillar-sculpt rect[fill="#7d7d7d"],
.pillar-sculpt rect[fill="#8a8a8a"],
.pillar-sculpt rect[fill="#9c9c9c"] {
  fill: color-mix(in oklab, var(--triad-color, #2ea8ff) 78%, #01060e);
}

.pillar-sculpt rect[fill="#a8a8a8"],
.pillar-sculpt rect[fill="#b4b4b4"],
.pillar-sculpt rect[fill="#d8d8d8"] {
  fill: color-mix(in oklab, var(--triad-color, #2ea8ff) 52%, #7e96b0);
}

.pillar-sculpt rect[fill="#efefef"],
.pillar-sculpt rect[fill="#f4f4f4"],
.pillar-sculpt rect[fill="#f8f8f8"],
.pillar-sculpt rect[fill="#ffffff"] {
  fill: color-mix(in oklab, var(--triad-color, #2ea8ff) 8%, #ffffff);
}

.pillar-col:hover .pillar-icon,
.pillar-col:focus-within .pillar-icon {
  transform: translateY(-3px);
  filter:
    drop-shadow(0 0 16px color-mix(in oklab, var(--triad-color, #2ea8ff) 80%, transparent))
    drop-shadow(0 0 30px color-mix(in oklab, var(--triad-glow, rgba(46, 168, 255, 0.45)) 70%, transparent))
    drop-shadow(0 0 42px color-mix(in oklab, var(--triad-glow, rgba(46, 168, 255, 0.45)) 45%, transparent));
}

.pillar-col:hover .pillar-sculpt,
.pillar-col:focus-within .pillar-sculpt {
  transform: translateY(-2px);
  filter:
    drop-shadow(0 0 14px color-mix(in oklab, var(--triad-color, #2ea8ff) 58%, transparent))
    drop-shadow(0 0 36px color-mix(in oklab, var(--triad-glow, rgba(46, 168, 255, 0.45)) 70%, transparent))
    drop-shadow(0 16px 26px rgba(0, 0, 0, 0.5));
}

/* ---------- Texto em cards (estilo triad-panel) ---------- */
.pillar-copy.triad-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  height: 100%;
  border-top-width: 2px;
  border-radius: 1rem;
  background:
    linear-gradient(
      165deg,
      color-mix(in oklab, var(--triad-color) 8%, transparent) 0%,
      color-mix(in oklab, var(--color-surface) 42%, transparent) 28%,
      color-mix(in oklab, var(--color-ink) 90%, transparent) 100%
    );
  border-color: color-mix(in oklab, var(--triad-color) 24%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--triad-color) 6%, transparent) inset,
    0 18px 40px -28px color-mix(in oklab, #000 55%, transparent);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s,
    box-shadow 0.35s;
}

.pillar-copy.triad-panel:hover,
.pillar-copy.triad-panel:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--triad-color) 40%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--triad-color) 10%, transparent) inset,
    0 22px 44px -26px color-mix(in oklab, #000 55%, transparent);
}

.pillar-copy .triad-panel-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left !important;
  width: 100%;
  height: 100%;
  padding: 1.45rem 1.35rem 1.5rem;
  gap: 0;
}

.pillar-copy > *,
.pillar-copy .triad-panel-meta,
.pillar-copy .triad-panel-slot,
.pillar-copy .triad-panel-tag,
.pillar-copy .triad-panel-title,
.pillar-copy .triad-panel-copy {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.pillar-copy .triad-panel-meta {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  width: 100%;
}

.pillar-copy .triad-panel-slot {
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-start;
  padding-top: 0.12em;
  font-family: var(--font-heading, inherit);
  font-size: 2.1rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1 !important;
  text-transform: uppercase;
  color: var(--triad-color, #f0c420) !important;
}

.pillar-copy .triad-panel-tag {
  margin: 0;
  flex: 1;
  min-width: 0;
  min-height: calc(1.2em * 2);
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-foreground, #fff);
}

.pillar-copy .triad-panel-title {
  margin: 0;
  min-height: calc(1.35em * 2);
  font-family: var(--font-heading, inherit);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-shadow: none !important;
  color: color-mix(in oklab, var(--color-foreground) 78%, transparent);
  max-width: 100%;
}

.pillar-copy .triad-panel-copy {
  margin: 0.65rem 0 0;
  min-height: calc(1.65em * 4);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.65;
  max-width: 100%;
  color: color-mix(in oklab, var(--color-muted) 92%, transparent);
}

.triad-caption {
  border-top: 1px solid color-mix(in oklab, var(--color-border) 42%, transparent);
  margin-top: 0.35rem;
  text-align: left !important;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  font-size: clamp(0.98rem, 1.45vw, 1.12rem);
  line-height: 1.55;
  padding-top: 1.5rem;
  box-sizing: border-box;
}

.triad-caption strong {
  font-weight: 700;
}

@media (max-width: 39.99rem) {
  .pillar-sculpt {
    width: min(100%, 8.25rem);
  }

  .pillar-unit {
    max-width: 19rem;
  }

  .pillar-copy .triad-panel-inner {
    padding: 1.25rem 1.15rem 1.35rem;
  }

  .pillar-icon {
    width: clamp(3.9rem, 18vw, 4.8rem);
    height: clamp(3.9rem, 18vw, 4.8rem);
  }

  .pillar-icon--hydrant img {
    transform: scale(1.32);
  }

  .pillar-unit::before {
    width: 5.5rem;
    height: 5.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-icon,
  .pillar-sculpt {
    transition: none;
  }

  .pillar-col:hover .pillar-icon,
  .pillar-col:focus-within .pillar-icon,
  .pillar-col:hover .pillar-sculpt,
  .pillar-col:focus-within .pillar-sculpt {
    transform: none;
  }
}