/* Variables de color basadas en tu logo */
:root {
    --rojo-primario: #BE3232;
    --rojo-oscuro: #691419;
    --rojo-claro: #C33232;
    --rojo-medio: #C83232;
    --rojo-intenso: #CD3232;
    --bordo: #6E1419;
    --negro: #000000;
    --gris-oscuro: #333333;
    --gris-medio: #666666;
    --gris-claro: #f8f9fa;
    --blanco: #ffffff;
}

/* Estilos generales */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--gris-oscuro);
    line-height: 1.6;
}
.hero-icon {
    font-size: 10rem;
    color: var(--rojo-claro);
    opacity: 0.7;
}
.logo-hero{
    padding-top: 50px;
}
/* Botones */
.btn-primary {
    background-color: var(--rojo-primario);
    border-color: var(--rojo-primario);
}

.btn-primary:hover {
    background-color: var(--rojo-oscuro);
    border-color: var(--rojo-oscuro);
}

.btn-warning {
    background-color: var(--rojo-intenso);
    border-color: var(--rojo-intenso);
    color: white;
}

/* Tarjetas */
.servicio-card, .sector-card, .plan-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.servicio-card:hover, .sector-card:hover {
    transform: translateY(-10px);
}

.plan-destacado {
    border: 2px solid var(--rojo-intenso);
}

.plan-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--rojo-intenso);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
}

/* Sección híbrida */
.bg-dark {
    background-color: var(--negro) !important;
}

/* Certificación */
.certification-logo {
    max-height: 300px;
    width: auto;
}

/* Integraciones */
.integration-card {
    background: var(--gris-claro);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.integration-card:hover {
    background: var(--rojo-claro);
    color: white;
}

/* Formulario */
.contact-form {
    background: var(--gris-claro);
    border-radius: 15px;
    border: 1px solid #dee2e6;
}
/* Testimonios */
.testimonio-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* Clientes logos */
.cliente-logo {
    background: white;
    border-radius: 8px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* Marcas compatibles */
.marca-card {
    background: var(--gris-claro);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.marca-card:hover {
    background: var(--rojo-claro);
    color: white;
    transform: translateY(-5px);
}

/* Números de etapa */
.numero-etapa {
    width: 50px;
    height: 50px;
    background: var(--rojo-primario);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.5rem;
    font-weight: bold;
}
/* ===== FOOTER ===== */
footer {
    background-color: var(--gris-oscuro) !important;
    color: var(--blanco) !important;
    padding-bottom:0 !important;
}
footer {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

footer > .container {
    padding-top: 3rem !important;
    /*padding-bottom: 3rem !important;*/
}
footer a {
    color: var(--rojo-claro) !important;
    	text-decoration:none;
}

footer a:hover {
    color: var(--blanco) !important;
}

footer .text-muted {
    color: #adb5bd !important;
}

/* ===== NAVBAR ===== */
.navbar {
    background-color: var(--rojo-primario) !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--blanco) !important;
}
.verde-paco {
    color: #3b662d !important;
}
.text-justify {
  text-align: justify !important;
}