/* =========================================================
   Sysnegocios - Reflectores LED antiexplosivos
   CSS limpio
   ========================================================= */


/* =========================================================
   Hero y fondos
   ========================================================= */

.hero-section-light {
    color: #fff;
    padding: 4rem 0;
}

.hero-section-dark {
    background-color: #f8f9fa;
    padding: 60px 0;
}

.fondo_iluminacion {
    background: #506c91;
    background: linear-gradient(
        90deg,
        rgba(80, 108, 145, 1) 0%,
        rgba(38, 14, 27, 1) 50%,
        rgba(179, 46, 84, 1) 100%
    );
}

.fondo_base {
    background: #f9f9f9;
}

.color-carteleria {
    background: linear-gradient(
        to bottom in oklab,
        oklch(51.63% 0.1715 244.15) 0%,
        50%,
        oklch(50% 0.25 131) 100%
    );
}

.color-antiexplosivo {
    color: #fff;

    /* Respaldo para navegadores sin soporte de oklch */
    background-color: #6a2d12;

    background-image: radial-gradient(
        ellipse farthest-corner at center in oklab,
        oklch(25% 0.16 20.65) 0%,
        oklch(48% 0.18 94.01) 80%
    );
}

.color-film {
    background: linear-gradient(
        to left in oklab,
        oklch(0.4214 0.2738 204.88),
        25%,
        oklch(0.5371 0 272.4) 100%
    );
}


/* =========================================================
   Cards generales
   ========================================================= */

.benefit-card {
    border-left: 4px solid #0070ba;
    background-color: #fff7de;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.10);
    transition: transform 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-5px);
}

.equal-benefit {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tech-card {
    background-color: #e3f2fd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.feature-card {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   Navbar, botones y enlaces
   ========================================================= */

.navbar {
    background-color: #6b0007;
}

.nav-link {
    color: #262626;
    font-size: 15px;
}

.nav-link:hover {
    color: #0070c0;
}

.btn-primary {
    background-color: #0070c0;
    border-color: #0070c0;
}

.btn-white {
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    padding: 12px 30px;
}

.whatsapp-btn {
    background-color: #25d366;
    color: #fff;
}


/* =========================================================
   Secciones y títulos
   ========================================================= */

.section-title {
    color: #404040;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

.section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 80px;
    height: 3px;
    transform: translateX(-50%);
    background-color: #0070c0;
}

.title-tag {
    font-weight: 700;
    color: #fff;
}

.logo {
    font-weight: 700;
    font-size: 18px;
}


/* =========================================================
   Contacto, footer, comentarios y tipografía
   ========================================================= */

.contact-info,
.footer {
    background-color: #f8f9fa;
    padding: 30px 0;
}

.comment1,
.taxes {
    font-size: 85%;
}

.comment2,
.taxes {
    color: #d71b1b;
}

.resaltar {
    color: #198754;
    font-weight: 600;
}

sup {
    font-size: 0.4em;
    vertical-align: super;
}


/* =========================================================
   Tablas técnicas
   ========================================================= */

table.tech-card thead.thead-custom1,
table.tech-card thead.thead-custom1 th {
    color: #fff7de !important;
    background-color: #0c6ca6 !important;
    border-color: #0c6ca6 !important;
}


/* =========================================================
   Fondos rainbow con oklch
   ========================================================= */

.rainbow {
    --color: oklch(63% 0.1381 0);
    background: linear-gradient(90deg in oklch longer hue, var(--color), var(--color));
}

.dark {
    --color: oklch(45.14% 0.0749 0);
}

.middle1 {
    --color: oklch(65.56% 0.0949 0);
}

.middle2 {
    --color: oklch(65.56% 0.1949 0);
}

.middle3 {
    --color: oklch(45.81% 0.1549 0);
}

.middle4 {
    --color: oklch(52.81% 0.2049 0);
}

.light {
    --color: oklch(78.81% 0.1056 0);
}


/* =========================================================
   Animaciones
   ========================================================= */

.shake-text {
    animation: shake 2s cubic-bezier(.36, .07, .19, .97) both 4;
    transform: translate3d(0, 0, 0);
}

@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}


/* =========================================================
   Aplicaciones - Reflectores LED antiexplosivos
   ========================================================= */

#aplicaciones.aplicaciones-section {
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.08), transparent 32%),
        radial-gradient(circle at bottom right, rgba(255, 193, 7, 0.10), transparent 30%),
        #f8f9fa;
}

#aplicaciones .aplicaciones-lead {
    color: #4f5b66;
}

#aplicaciones .aplicaciones-mosaic {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 105px;
    grid-auto-flow: dense;
    gap: 1.25rem;
}

#aplicaciones .app-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 260px;
    border-radius: 1.25rem;
    background: #07111f;
    box-shadow: 0 1.2rem 2.5rem rgba(0, 0, 0, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

#aplicaciones .app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.24);
}

#aplicaciones .app-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center center;
    background: #07111f;
}

#aplicaciones .app-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: inherit;
    pointer-events: none;
}

#aplicaciones .app-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 1rem;
    color: #fff;
    background: linear-gradient(
        180deg,
        rgba(7, 17, 31, 0.24) 0%,
        rgba(7, 17, 31, 0.88) 100%
    );
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#aplicaciones .app-overlay h3 {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

#aplicaciones .app-overlay p {
    margin-bottom: 0;
    font-size: 0.78rem;
    line-height: 1.28;
    color: rgba(255, 255, 255, 0.90);
}

#aplicaciones .app-badge {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.28rem 0.68rem;
    border-radius: 999px;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #102033;
    background: rgba(255, 255, 255, 0.90);
}

#aplicaciones .app-badge-power {
    color: #fff;
    background: rgba(220, 53, 69, 0.92);
}


/* Distribución asimétrica en escritorio */

#aplicaciones .app-card-large {
    grid-column: span 7;
    grid-row: span 4;
}

#aplicaciones .app-card-medium {
    grid-column: span 5;
    grid-row: span 3;
}

#aplicaciones .app-card-tall {
    grid-column: span 4;
    grid-row: span 4;
}

#aplicaciones .app-card-small {
    grid-column: span 3;
    grid-row: span 3;
}

#aplicaciones .app-card-wide {
    grid-column: span 8;
    grid-row: span 3;
}


/* Ajuste de texto en tarjetas chicas o verticales */

#aplicaciones .app-card-small .app-overlay,
#aplicaciones .app-card-tall .app-overlay {
    padding: 0.9rem;
}

#aplicaciones .app-card-small .app-overlay h3,
#aplicaciones .app-card-tall .app-overlay h3 {
    font-size: 0.98rem;
    margin-bottom: 0.2rem;
}

#aplicaciones .app-card-small .app-overlay p,
#aplicaciones .app-card-tall .app-overlay p {
    font-size: 0.78rem;
    line-height: 1.24;
}

#aplicaciones .app-card-small .app-badge,
#aplicaciones .app-card-tall .app-badge {
    font-size: 0.66rem;
    padding: 0.24rem 0.60rem;
    margin-bottom: 0.42rem;
}


/* =========================================================
   Media queries
   ========================================================= */

/* Tablet */
@media (max-width: 1024px) and (min-width: 768px) {
    #diseno .row {
        flex-direction: column !important;
    }

    #diseno .col-md-6 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    #diseno img {
        max-width: 90%;
        margin-bottom: 20px;
    }

    #diseno ul {
        padding-left: 0;
    }

    #aplicaciones .aplicaciones-mosaic {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 105px;
    }

    #aplicaciones .app-card-large,
    #aplicaciones .app-card-medium,
    #aplicaciones .app-card-tall,
    #aplicaciones .app-card-small,
    #aplicaciones .app-card-wide {
        grid-column: span 3;
        grid-row: span 3;
    }

    #aplicaciones .app-card-large,
    #aplicaciones .app-card-wide {
        grid-column: span 6;
        grid-row: span 3;
    }
}

/* Móvil */
@media (max-width: 767.98px) {
    .equal-benefit,
    .equal-card {
        width: 90% !important;
        margin: 0 auto;
    }

    #aplicaciones .aplicaciones-mosaic {
        display: block;
    }

    #aplicaciones .app-card {
        aspect-ratio: 4 / 3;
        min-height: auto;
        margin-bottom: 1.25rem;
    }

    #aplicaciones .app-overlay {
        padding: 0.9rem;
    }

    #aplicaciones .app-overlay h3 {
        font-size: 0.98rem;
        line-height: 1.15;
        margin-bottom: 0.2rem;
    }

    #aplicaciones .app-overlay p {
        font-size: 0.78rem;
        line-height: 1.24;
    }

    #aplicaciones .app-badge {
        font-size: 0.66rem;
        padding: 0.24rem 0.60rem;
        margin-bottom: 0.42rem;
    }
}