.directorio-page{animation:fadeIn .6s ease-out}.directorio-header{padding:6rem 0 4rem;background-color:var(--primary-dark);color:white}.state-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;position:relative;z-index:10}.state-card{position:relative;padding:0;overflow:hidden;border-radius:16px;aspect-ratio:16/9;display:block}.state-img-wrapper{position:absolute;top:0;left:0;width:100%;height:100%}.state-img-fallback{width:100%;height:100%;background:var(--primary-color)}.state-img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.state-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,57,120,.9) 0,rgba(15,57,120,.2));display:flex;align-items:flex-end;justify-content:space-between;padding:1.5rem;transition:background .3s ease}.state-name{color:white;margin:0;font-size:1.25rem;font-weight:700;transform:translateY(0);transition:transform .3s ease}.state-arrow{color:var(--secondary-color);font-size:1.5rem;font-weight:700;opacity:0;transform:translateX(-10px);transition:all .3s ease}.state-card:hover .state-img{transform:scale(1.1)}.state-card:hover .state-overlay{background:linear-gradient(0deg,rgba(15,57,120,.95) 0,rgba(15,57,120,.4))}.state-card:hover .state-name{transform:translateY(-5px);color:var(--secondary-light)}.state-card:hover .state-arrow{opacity:1;transform:translateX(0)}@media (max-width:768px){.state-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1rem}.state-overlay{padding:1rem}.state-name{font-size:1rem!important}}