.sectors-section { padding: 4rem 1rem; background: #ffffff; position: relative; overflow: hidden; }
.sectors-section::before { content: ""; display: none; }
.sectors-header { max-width: 1100px; margin: 0 auto 2rem; text-align: center; }
.sectors-title { font-size: 2rem; letter-spacing: .2px; margin: 0; color: #174392; }
.sectors-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; max-width: 1100px; margin: 2rem auto 0; align-items: stretch; }
.sector-card { background: #ffffff; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 36px rgba(23,67,146,.12); border: 1px solid rgba(23,67,146,.12); transform: translateY(16px) scale(.98); opacity: 0; transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease; position: relative; perspective: 800px; }
.sector-card.in { transform: none; opacity: 1; }
.sector-card.in::after { animation: borderPulse 12s ease-in-out infinite; }
.sector-card::after { content: ""; position: absolute; inset: 0; border-radius: 18px; box-shadow: inset 0 0 0 0 rgba(234,88,12,0.0); transition: box-shadow .3s ease; }
.sector-card:hover { box-shadow: 0 18px 42px rgba(23,67,146,.18); }
.sector-card:hover::after { box-shadow: inset 0 0 0 2px rgba(23,67,146,0.28); }
.sector-media { position: relative; background: #f6f9ff; height: 240px; border-top-left-radius: 18px; border-top-right-radius: 18px; overflow: hidden; }
.sector-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: translate3d(0,0,0) scale(1); transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .6s; will-change: transform, filter; animation: kenBurns 18s ease-in-out infinite alternate; transform-origin: center; filter: saturate(1.08) contrast(1.06) brightness(1.02); }
.sector-card:hover .sector-media img { transform: translateY(-2px) scale(1.04) rotate(0.2deg); filter: saturate(1.05) contrast(1.03); }
.sector-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 58%; background: linear-gradient(to top, rgba(5, 23, 56, 0.873) 0%, rgba(23,67,146,0.04) 60%, rgba(23,67,146,0) 100%); pointer-events: none; }
.sector-media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,0.26) 0%, rgba(0,0,0,0.0) 55%); mix-blend-mode: multiply; opacity: 0.33; pointer-events: none; animation: overlayFade 11s ease-in-out infinite alternate; }
.sector-content { position: absolute; left: 0; right: 0; bottom: 0; padding: .85rem 1rem 1rem; text-align: center; background: linear-gradient(to top, rgba(0,0,0,0.42), rgba(0,0,0,0.0) 72%); }
.sector-content h3 { margin: 0 auto; max-width: calc(100% - 1rem); font-size: 1.08rem; color: #ffffff; letter-spacing: .35px; text-shadow: 0 2px 8px rgba(0,0,0,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: titlePulse 9s ease-in-out infinite; }
#esa-sectors .sector-card:nth-child(1) { transition-delay: .08s; }
#esa-sectors .sector-card:nth-child(2) { transition-delay: .16s; }
#esa-sectors .sector-card:nth-child(3) { transition-delay: .24s; }
#esa-sectors .sector-card:nth-child(4) { transition-delay: .32s; }
@keyframes kenBurns { 0% { transform: scale(1) translateY(0); } 50% { transform: scale(1.06) translateY(-3px); } 100% { transform: scale(1.08) translateY(-5px); } }
@keyframes borderPulse { 0%,100% { box-shadow: inset 0 0 0 0 rgba(23,67,146,0.22); } 50% { box-shadow: inset 0 0 0 2px rgba(23,67,146,0.28); } }
@keyframes overlayFade { 0% { opacity: 0.26; } 50% { opacity: 0.38; } 100% { opacity: 0.26; } }
@keyframes titlePulse { 0%,100% { text-shadow: 0 2px 8px rgba(0,0,0,0.35); letter-spacing: .35px; } 50% { text-shadow: 0 3px 10px rgba(0,0,0,0.42); letter-spacing: .38px; } }
@media (max-width: 1024px) { .sectors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sectors-grid { grid-template-columns: 1fr; } .sectors-section { padding: 3rem 1rem; } .sectors-title { font-size: 1.7rem; } }