body { font-family: 'Segoe UI', Arial, sans-serif; margin:0; background:#f9f9f9; color:#333; }
header { background:#00AEEF; color:#fff; padding:20px; text-align:center; }
header h1 { margin:0; font-size:28px; }

.intro { max-width:900px; margin:40px auto; background:#fff; padding:30px; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.1); }
.intro h2 { color:#00AEEF; }
.intro p { font-size:16px; line-height:1.6; }

.menu-principal { text-align:center; margin:40px; }
.menu-principal .boton {
    display:inline-block; margin:10px; padding:15px 25px;
    background:#00AEEF; color:#fff; text-decoration:none; border-radius:8px;
    font-weight:bold; transition:background 0.3s ease;
}
.menu-principal .boton:hover { background:#0078a0; }

.contenedor { display:flex; flex-wrap:wrap; justify-content:center; margin:30px auto; max-width:1200px; }
.bloque {
    background:#fff; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.1);
    width:280px; margin:20px; text-align:center; transition:transform 0.2s ease;
}
.bloque:hover { transform:translateY(-5px); }
.bloque img { width:100%; height:160px; object-fit:cover; border-top-left-radius:12px; border-top-right-radius:12px; }
.bloque h3 { margin:15px 0 5px; color:#00AEEF; font-size:20px; }
.bloque p { font-size:14px; color:#555; padding:0 15px 15px; }
.bloque a {
    display:block; background:#00AEEF; color:#fff; padding:12px; text-decoration:none;
    border-bottom-left-radius:12px; border-bottom-right-radius:12px; font-weight:bold;
}
.bloque a:hover { background:#0078a0; }

.powerbi { display:block; margin:20px auto; width:90%; height:600px; border:2px solid #00AEEF; border-radius:8px; }