/* Colégio Ômega — Nossos Pilares */

/* topo: título + "templo" com os 3 pilares sustentando a formação integral */
.pi-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 75% 30%, #0D4D7D 0%, #08263A 60%); padding: clamp(60px, 8vw, 100px) clamp(16px, 4vw, 48px) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; min-height: min(86vh, 760px); }
.pi-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 22px 22px; }
.pi-hero-in { position: relative; z-index: 1; align-self: center; max-width: 560px; justify-self: end; }
.pi-hero h1 { font-family: var(--disp); font-size: clamp(56px, 8.5vw, 112px); font-weight: 800; text-transform: uppercase; line-height: .95; margin: 18px 0 16px; animation: sobe .8s .1s both; }
.pi-hero h1 em { font-style: normal; color: var(--acc); display: block; }
.pi-hero-in > p { font-size: clamp(18px, 2.2vw, 22px); opacity: .92; animation: sobe .8s .2s both; }

.pi-templo { position: relative; z-index: 1; width: min(520px, 100%); justify-self: start; display: flex; flex-direction: column; align-items: stretch; }
.pi-teto { position: relative; height: 130px; margin: 0 -20px; clip-path: polygon(50% 0, 100% 72%, 100% 100%, 0 100%, 0 72%); background: linear-gradient(180deg, #FFAA6D, #FF822B); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 12px; animation: pi-desce .9s .9s both; }
.pi-teto span { font-family: Georgia, serif; font-size: 44px; line-height: 1; color: #0B2A3F; }
.pi-teto b { font-family: var(--disp); text-transform: uppercase; letter-spacing: 2px; color: #0B2A3F; font-size: 16px; }
@keyframes pi-desce { from { opacity: 0; transform: translateY(-40px); } }
.pi-colunas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 0 14px; height: clamp(300px, 34vw, 400px); }
.pi-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding-bottom: 22px; text-decoration: none; color: #fff; border-radius: 8px 8px 0 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 10px, rgba(255, 255, 255, .06) 10px 20px), var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transform-origin: bottom; animation: pi-sobe .9s calc(var(--i) * .15s + .2s) cubic-bezier(.2, .8, .2, 1) both; transition: filter .2s; }
.pi-col::before { content: ''; position: absolute; top: 0; left: -8px; right: -8px; height: 18px; background: var(--c); border-radius: 4px; filter: brightness(1.15); }
.pi-col:hover { filter: brightness(1.12); }
.pi-col i { font-style: normal; font-size: 34px; }
.pi-col span { font-family: var(--disp); font-weight: 700; font-size: clamp(16px, 1.8vw, 22px); text-transform: uppercase; letter-spacing: 1px; writing-mode: vertical-rl; transform: rotate(180deg); }
@keyframes pi-sobe { from { transform: scaleY(0); opacity: 0; } }
.pi-base { height: 26px; margin: 0 -30px; background: linear-gradient(180deg, #E6EDF3, #B8C7D4); border-radius: 6px 6px 0 0; }

/* seções dos pilares (reaproveita o layout de foto na altura inteira da estrutura) */
.pi-sec .es-fotos { position: relative; }
.pi-num { position: absolute; z-index: 2; bottom: 24px; left: 32px; font-family: var(--disp); font-weight: 800; font-size: clamp(90px, 11vw, 160px); line-height: .8; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); }
.pi-sec.inv .pi-num { left: auto; right: 32px; }
.pi-sec .es-f.foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--c) 55%, transparent), transparent 50%); }
.pi-marca { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: #fff; background: var(--c); padding: 7px 16px; border-radius: 99px; }
.pi-marca i { font-style: normal; font-size: 18px; letter-spacing: 0; }
.pi-sec .es-txt h2 { color: var(--navy); }
.pi-chaves { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pi-chaves li { font-weight: 600; font-size: 14px; padding: 7px 14px; border-radius: 99px; background: color-mix(in srgb, var(--c) 12%, #fff); color: color-mix(in srgb, var(--c) 75%, #000); }
.pi-citacao { margin-top: 0; }

@media (max-width: 900px) {
  .pi-hero { grid-template-columns: 1fr; padding-top: 50px; }
  .pi-hero-in { justify-self: start; }
  .pi-templo { justify-self: center; width: min(400px, 100%); }
  .pi-colunas { height: 260px; gap: 14px; }
}