/* Paleta de colores e identidad */
:root {
    --orange-primary: #f05a24; /* Color de energía / acento */
    --dark-bg: #1e1e24;
    --black-footer: #111112;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

/* Clases de utilidad */
.text-orange { color: var(--orange-primary) !important; }
.bg-orange { background-color: var(--orange-primary) !important; }
.btn-orange {
    background-color: var(--orange-primary);
    color: #fff;
    border: none;
}
.btn-orange:hover {
    background-color: #d44d1c;
    color: #fff;
}

/* Header / Hero con imagen de fondo */
.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.65)), 
                url('../img/torre-electrica.jpg') no-repeat center center/cover;
    min-height: 85vh;
    padding: 100px 0;
}

/* Tarjetas de servicios */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 3px solid transparent !important;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    border-bottom: 3px solid var(--orange-primary) !important;
}

.icon-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(240, 90, 36, 0.1);
    border-radius: 8px;
}

.bg-secondary-dark {
    background-color: #2a2a32;
}

.line-center {
    width: 60px;
    height: 3px;
    background-color: var(--orange-primary);
    margin: 15px auto 0;
}

/* Ajustes responsivos para bordes en columnas */
@media (min-width: 768px) {
    .border-end-md {
        border-end: 1px solid rgba(255,255,255,0.1);
    }
}