body {
    padding-top: 60px;
}

:root {
    --color-primario: #00607B;
    --color-secundario: #008A81;
    --color-secundario-light: #00AF80;
    --color-blanco: #FFFFFF;
    --color-negro: #000000;
}

/* Contenedor del título o sección */
.seccion-con-triangulo {
    position: relative;
    padding: 1rem 0 1rem 100px; /* Espacio a la izquierda para que el texto no tape el triángulo */
    min-height: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* El Triángulo Decorativo */
    .seccion-con-triangulo::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 75px; /* Ancho del triángulo */
        height: 75px; /* Alto del triángulo */
        /* El degradado de tus colores */
        background: linear-gradient(180deg, #00607B 0%, #00AF80 100%);
        /* Forma de triángulo apuntando a la derecha */
        clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
        z-index: -1; /* Se queda detrás del texto */
    }

.titulo-producto {
    color: var(--color-secundario) !important; /* O var(--color-secundario), el que prefieras */
    font-weight: bold;
    line-height: 1.2; /* Ayuda a que la alineación sea predecible */
}

.linea-con-punto {
    position: relative;
    display: inline-block; /* Para que se ajuste al ancho que le des */
    width: 150px; /* Largo de la línea, puedes cambiarlo */
    height: 3px; /* Grosor de la línea */
    background-color: var(--color-secundario-light); /* El color verde #00AF80 */
    border-radius: 2px; /* Bordes redondeados para la línea */
    margin: 0; /* Limpiamos el margen para controlarlo desde el HTML */
    flex-shrink: 0;
}

    /* El círculo del final */
    .linea-con-punto::after {
        content: "";
        position: absolute;
        right: -5px; /* Ajusta la posición del círculo al final de la línea */
        top: 50%;
        transform: translateY(-50%); /* Centra el círculo verticalmente respecto a la línea */
        width: 10px; /* Diámetro del círculo */
        height: 10px;
        background-color: var(--color-secundario-light);
        border-radius: 50%; /* Lo hace circular */
        box-shadow: 0 0 5px rgba(0, 175, 128, 0.4); /* Pequeño resplandor opcional */
    }

.cuadro-destacado {
    /* Fondo verde fijo por si el degradado falla */
    background-color: #008A81 !important;
    background: linear-gradient(135deg, #008A81 0%, #00AF80 100%) !important;
    /* Color de texto */
    color: #ffffff !important;
    /* Espaciado y dimensiones */
    padding: 15px 25px !important;
    margin-top: 25px !important;
    margin-bottom: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Obligar a que se muestre */
    display: block !important;
    width: 100% !important;
    min-height: 50px !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Sombra */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}

    /* Forzar el texto interno a blanco */
    .cuadro-destacado h2 {
        color: #ffffff !important;
        margin: 0 !important;
        font-size: 1.5rem !important;
        font-weight: bold !important;
        text-align: left !important;
    }

/* Por si acaso usaste otros tags dentro */
.cuadro-destacado p, .cuadro-destacado span {
    color: #ffffff !important;
}

h2 {
    color: var(--color-secundario);
}

h5 {
    color: var(--color-secundario-light);
}

.empresa {
    color: var(--color-primario);
    font-weight: bold;
}

.btn-detesim {
    background-color: var(--color-secundario) !important;
    border-color: var(--color-secundario) !important;
    color: white !important;
    padding: 10px 30px; /* Un poco más ancho para que se vea mejor */
    font-weight: bold;
    transition: all 0.3s ease; /* Animación suave al pasar el mouse */
}

    /* Efecto al pasar el mouse (Hover) */
    .btn-detesim:hover {
        background-color: var(--color-secundario-light) !important;
        border-color: var(--color-secundario-light) !important;
        transform: translateY(-2px); /* Se eleva un poquito */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    /* Color cuando el botón está deshabilitado (mientras se envía) */
    .btn-detesim:disabled {
        background-color: #cccccc !important;
        border-color: #cccccc !important;
        cursor: not-allowed;
    }

.swal2-container {
    z-index: 99999 !important;
}

/* Contenedor principal: oculta lo que se sale de los bordes */
.carrete-container {
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
    background: white;
    white-space: nowrap;
    position: relative;
}

/* El carril que se mueve */
.carrete-track {
    display: inline-flex;
    align-items: center;
    gap: 50px; /* Espacio entre imágenes */
    animation: scroll-derecha-izquierda 30s linear infinite; /* 30s es la velocidad */
}

/* Definición de la animación */
@keyframes scroll-derecha-izquierda {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%); /* Se mueve hasta la mitad (donde empieza el duplicado) */
    }
}

/* Estilo de las imágenes */
.carrete-img {
    height: 60px; /* Ajusta el alto de los logos/imágenes */
    width: auto;
    filter: grayscale(100%); /* Opcional: logos en gris */
    opacity: 0.6;
    transition: all 0.3s ease;
}

.carrete-img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.my-custom-footer {
    background-color: #008A81 !important;
    color: white !important;
}

/* Agregado para asegurar que los párrafos dentro del footer sean blancos */
.my-custom-footer p, .my-custom-footer h5 {
    color: white !important;
}

.main {
    flex: 1;
}

.content {
    padding-top: 1.1rem;
}

/* Opcional: Centrar el contenido de la web */
.container-main {
    max-width: 1200px;
    margin: 0 auto;
}

/* Color base de los links (si quieres quitar el text-dark del HTML) */
.navbar-nav .nav-link {
    color: #333 !important; /* Gris oscuro */
    transition: color 0.3s ease; /* Para que el cambio sea suave */
    font-weight: 500;
}

/* Color cuando pasas el mouse (Hover) */
.navbar-nav .nav-link:hover {
    color: var(--color-secundario) !important; /* Usará tu verde #008A81 */
}

/* Opcional: Color de la página donde estás parado (Active) */
.navbar-nav .nav-link.active {
    color: var(--color-secundario-light) !important;
}