/* ══════════════════════════════════════
   Infraestructura
══════════════════════════════════════ */

/* Intro */
.infra-intro {
    max-width: 860px;
    margin: 0 auto;
    padding: 72px 80px 48px;
    text-align: center;
}
.infra-intro h2 { font-size: 1.85rem; color: #07193d; margin: 10px 0 16px; }
.infra-intro p  { color: #4a5568; line-height: 1.75; }

/* Cards grid */
.infra-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 80px 80px;
}
.infra-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(7,25,61,.06);
    border: 1px solid rgba(7,25,61,.06);
    transition: transform .25s, box-shadow .25s;
    display: flex;
    flex-direction: column;
}
.infra-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(7,25,61,.13);
}

/* Image area */
.infra-card__img {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #07193d, #0c2b66);
}
.infra-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.infra-card:hover .infra-card__img img {
    transform: scale(1.05);
}
/* Fallback cuando la imagen no carga */
.infra-card__img img[src=""],
.infra-card__img img:not([src]) {
    display: none;
}

/* Badge con ícono sobre la imagen */
.infra-card__img-icon {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    background: rgba(220, 168, 77, 0.92);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #07193d;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.infra-card__img-icon svg { width: 20px; height: 20px; }

/* Text body */
.infra-card__body {
    padding: 24px 24px 28px;
    flex: 1;
    border-top: 3px solid transparent;
    transition: border-color .25s;
}
.infra-card:hover .infra-card__body {
    border-top-color: #dca84d;
}
.infra-card__body h3 { font-size: 1.05rem; color: #07193d; margin-bottom: 10px; }
.infra-card__body p  { font-size: .875rem; color: #5a6a7e; line-height: 1.65; margin: 0; }

@media (max-width: 900px) {
    .infra-intro,
    .infra-grid { padding-left: 24px; padding-right: 24px; }
    .infra-card__img { height: 180px; }
}