/**************************/
.letracolor{
    color: #3b82f6 !important;
}
.letracolor2{
    color: #1d4ed8 !important;
}
.letrasmll{
    font-size: 11px !important;
}

/********** Container ***************/
.container { position: relative; z-index: 1; }
/********** Container ***************/


/*******************************************************/
/***********Parte 04 de Drones de Inspeciion *********************/
.product-dron-productskyfend { padding: 10px 0; background-color: #ffffff; }
/* Ajuste de 10px entre el título y la grilla de productos */

/* Ajuste de 10px entre el título y la grilla de productos */
.product-dron-productskyfend .row {
    margin-top: 10px !important;
}

.section-title { font-size: 24px; font-weight: 700; color: #1d4ed8; }

.dron-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dron-card h3 { font-size: 18px !important; }

.dron-title { font-size: 20px; font-weight: 700; color: #1d4ed8; margin-bottom: 10px; padding-top: 10px !important;}

.inspect-item h3 { font-size: 17px !important; }

.dron-subtitle { font-size: 14px; color: #666; margin-bottom: 20px; }

.dron-img { width: 100%; height: auto; margin-bottom: 20px; }

.dron-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #333;
}

.dron-specs li {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}

.dron-specs li::before {
    content: "✓";
    color: #1d4ed8;
    font-weight: bold;
    margin-right: 10px;
}

.dron-link {
    margin-top: auto;
    text-decoration: none;
    color: #1d4ed8;
    font-weight: 600;
    font-size: 14px;
}

/* Tarjetas de producto */
.inspect-item {
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 10px;
    height: 100%;
}

/* Banner lateral */
.inspect-banner {
    background-color: #000a1f;
    color: white;
    padding: 30px;
    border-radius: 10px;
    height: 100%;
}

.banner-title { color: #fff; font-size: 1.5rem; margin-bottom: 15px; }
.banner-text { font-size: 0.9rem; margin-bottom: 20px; }
.banner-specs { list-style: none; padding: 0; }
.banner-specs li { margin-bottom: 10px; font-size: 0.9rem; }
.banner-specs i { color: #3b82f6; margin-right: 10px; }
.banner-img { width: 100%; margin-top: 20px; border-radius: 5px; }

/* Para escritorio: 5 columnas parejas */
@media (min-width: 992px) {
    .grid-5-parejo {
        display: grid !important;
        /* Ajusta el 240px según el ancho total de tu contenedor */
        grid-template-columns: repeat(5, 240px); 
        gap: 20px;
        justify-content: center;
    }

    /* Forzamos que los elementos ocupen los 240px definidos */
    .grid-5-parejo > div {
        width: 240px;
    }
}

/* Ajustes de componentes en píxeles */
.inspect-item, .inspect-banner {
    height: 450px; /* Altura fija en px */
    padding: 20px;
    border-radius: 12px;
}
/**************************************/





/********* parte 03 seguriapps *****/
.segapps-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 350px;
}

.segapps-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.segapps-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 15, 45, 0.95), transparent);
    color: white;
}

.segapps-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 18px;
}

.segapps-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.segapps-desc { font-size: 13px; opacity: 0.9; margin: 0; line-height: 1.4; }
/***********************************/





/*******************/
/* Forzar cuadrícula de 8 columnas exactas */
.productskyfend-app8-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    text-align: center;
    border: 1px solid #222;
    padding: 20px;
    border-radius: 12px;
    width: 100%;
}

.productskyfend-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.productskyfend-app-item i {
    font-size: 30px; 
    color: #3b82f6;
}

.productskyfend-app-item p {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    color: #ccc;
}

/* Responsividad */
@media (max-width: 1200px) {
    .productskyfend-app8-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 576px) {
    .productskyfend-app8-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/*******************/



/*********************************/
/* --- 1. SECCIÓN CTA (Fondo blanco, recuadro azul marino) --- */
.seccion-cta-productskyfend {
    background-color: #ffffff !important;
    padding: 60px 20px !important;
    width: 100%;
}

.seccion-cta-productskyfend .dmx-contenedor-interno {
    background-color: #001233 !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 40px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.seccion-cta-productskyfend h3 { font-size: 24px !important; color: #ffffff !important; margin: 0 0 5px 0 !important; font-weight: 700 !important; }
.seccion-cta-productskyfend p { font-size: 16px !important; color: #ffffff !important; margin: 0 !important; opacity: 0.9; }

.seccion-cta-productskyfend .dmx-icono-box {
    background-color: #3b82f6 !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.seccion-cta-productskyfend .dmx-icono-box i { font-size: 30px !important; color: #ffffff !important; }

/* --- 2. SECCIÓN APLICACIONES (Lista con iconos) --- */
.aplicacion-industria-seccion { padding: 80px 0; background-color: #ffffff; }
.aplicacion-industria-seccion .container {padding: 30px:}
.seccion-titulo { font-size: 20px; font-weight: 700; color: #1d4ed8; margin-bottom: 30px; }

.app-item {
    display: flex;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #eeeeee;
    font-size: 16px;
    color: #333333;
}
.app-item i { margin-right: 15px; color: #1d4ed8; font-size: 20px; }

/* --- 3. SECCIÓN INDUSTRIAS (Tarjetas con icono inferior) --- */
.industrias-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
.industria-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 200px;
}
.industria-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    font-weight: 600;
}

.card-footer-info {
    position: absolute;
    bottom: 15px;
    left: 10px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}
.card-footer-info i { font-size: 22px; }

/* --- RESPONSIVIDAD (Píxeles) --- */
@media (max-width: 992px) {
    .industrias-grid { grid-template-columns: repeat(5, 1fr); }
    .seccion-cta-productskyfend .dmx-contenedor-interno { flex-direction: column !important; text-align: center !important; }
}

@media (max-width: 768px) {
    .industrias-grid { grid-template-columns: repeat(3, 1fr); }
}

/***
 * @media (max-width: 576px) {
    .industrias-grid { grid-template-columns: 3fr; }
    */
    /* Ajuste opcional: Si quieres que las tarjetas no sean tan altas en móvil */
    @media (max-width: 576px) {
        .industria-card {
            height: 250px; /* Altura más cómoda para 2 columnas en celular */
        }
        .seccion-cta-productskyfend .btn-lg { width: 100% !important; }
}
/*********************************/


/************* seccion 03 *************/
.productskyfend-how-it-works { background: #0a0a0a; padding: 10px 0; color: #ffffff; }

.section-title { color: #ffffff; font-size: 24px; margin-bottom: 20px; border-left: 4px solid #1d4ed8; padding-left: 15px; font-weight: bold; }

/*
.section-title-blu { 
color: #1d4ed8; 
font-size: 28px; 
margin-bottom: 20px; 
border-left: 4px solid #1d4ed8; 
padding-left: 15px; 
font-weight: bold; }
*/

.section-desc { font-size: 15px; color: #cccccc; margin-bottom: 40px; line-height: 24px; }


/* Botón CTA */
.btn-cta {
    background-color: #1d4ed8;
    color: #ffffff;
    border: none;
    padding: 15px 30px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    transition: background 0.3s;
    text-decoration: none;
}

.btn-cta:hover {
    background-color: #011a39;
    color: #ffffff;
}

@media (max-width: 768px) {
    .productskyfend-solicitamos-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    .productskyfend-solicitamos-icon { margin-bottom: 10px; }
}


/********Numeros estadisticas*****************/
.number-stats-section {
    padding: 10px 0;
    background-color: #ffffff; /* Fondo de la página detrás del marco */
}

.stats-wrapper {
    background-color: #000a1f;
    border: 2px solid #0a1f44; /* Azul Navy oscuro */
    border-radius: 15px;
    padding: 10px 10px;
    box-shadow: 0 10px 10px rgba(0,0,0,0.05);
}

.number-stats-section i {
    color: #3b82f6; /* Tu azul característico */
}

.number-stats-section h3 {
    margin-bottom: 5px;
    color: #1a1a1a; /* Texto oscuro para contraste en fondo blanco */
}

.number-stats-section p {
    margin-bottom: 0;
    font-weight: 600;
    color: #555;
}

/* Divisores verticales solo en Desktop */
@media (min-width: 768px) {
    .stats-wrapper .row > div:not(:last-child) {
        border-right: 1px solid #e0e0e0;
    }
}
/*************************/


/*********Porque Capacitarte**************************/
/* Sección de Propuesta de Valor - Estilos diferenciados */
.seccion-propuesta-valor {
  padding: 40px 20px;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.seccion-propuesta-valor .dmx-contenedor {
  max-width: 1200px;
  margin: 10 auto;
}

/********se agrego**************/
.dmx-contenedor-cta {
    background-color: #000f29; /* Color de fondo oscuro */
    padding: 40px;             /* Aumentado de 40px a 50px (10px adicionales en los 4 lados) */
    border-radius: 16px;
    margin-bottom: 20px;       /* Opcional: para separar esta sección de la siguiente */
}

.col-cta-ajustada {
    /* Aumentamos el padding para dar aire interno a la columna */
    padding-top: 20px !important; 
    padding-bottom: 20px !important;
}

/* Ajustamos el botón para que no empuje tanto hacia abajo si es necesario */
.col-cta-ajustada .btn {
    margin-bottom: 30px !important; /* Separación clara entre botón e iconos */
}

.dmx-icono-box {
    background-color: #3b82f6;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    flex-shrink: 0;
}
.cta-title-small {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
}

.icon-small { font-size: 12px; line-height: 1.2; }
.icon-small i { font-size: 24px; color: #888; }

/* Ajustes responsivos */
@media (max-width: 992px) {
    .border-lg-start { border-left: none !important; margin-top: 20px; padding-top: 20px; border-top: 1px solid #333; }
    .text-lg-end { text-align: center !important; }
}


/*********************/

/********** unificar tablas numero y apps aplicacion**************/
/* Clase compartida para alinear ambas secciones */
.stats-layout-shared {
    background-color: #000a1f; /* Azul navy oscuro constante */
    border-radius: 20px;       /* Bordes uniformes */
    padding: 40px 20px;        /* Relleno interior uniforme */
    margin-bottom: 20px;       /* Espacio entre secciones */
    color: #ffffff;            /* Texto blanco uniforme */
}

/* Ajuste específico para que las letras dentro de las stats se vean blancas */
.dmx-contenedor-unificado {
    background-color: #000a1f; 
    border-radius: 20px;       
    padding: 40px 30px;         
    width: 100%;               /* Fuerza a ocupar el 100% del contenedor padre */
}

/* Ajuste para que las columnas tengan una línea divisoria coherente */
@media (min-width: 992px) {
    .number-stats-section .dmx-contenedor-unificado .row > div:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
}
/* Clase compartida para alinear ambas secciones */





/* Capa oscura (Overlay) */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(12, 15, 14, 0.85); /* 85% de opacidad oscura */
    z-index: 1;
}

.banner-title {
    font-size: 24px;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 15px;
}


.banner-text {
    font-size: 16px;
    color: #eeeeee;
    margin-bottom: 25px;
    line-height: 1.5;
}

.btn-solicitar-cotizacion {
    display: inline-block;
    background-color: #3b82f6;
    color: #ffffff;
    padding: 12px 25px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 4px;
    font-size: 15px;
    transition: background 0.3s ease;
}

.banner-features {
    display: flex;
    gap: 40px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

.feature-item i {
    font-size: 30px;
    margin-bottom: 10px;
}

.feature-item span {
    font-size: 13px;
    max-width: 100px;
}

/* Responsividad en píxeles */
@media (max-width: 767px) {
    .banner-title { font-size: 24px; text-align: center; }
    .banner-text { text-align: center; }
    .btn-solicitar-cotizacion { width: 100%; text-align: center; }
    .banner-features { justify-content: center; margin-top: 30px; gap: 20px; }
}

/***********************************************/
/***********************************************/

/**************************/
/**************************/

/* Sección Drone Soccer */
.dronsoccer {
    background-color: #0b0e14;
    color: #e0e0e0;
    padding: 60px 20px;
    font-family: Roboto, sans-serif;
}

.dronsoccer .container {
    max-width: 960px;
    margin: 0 auto;
}

.dronsoccer h1 {
    color: #00d4ff;
    font-size: 40px;
    margin-bottom: 20px;
    text-align: center;
}

.dronsoccer p {
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 40px;
}

.dronsoccer .feature-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
}

.dronsoccer .feature-item {
    flex: 1;
    padding: 20px;
    border: 1px solid #1f2a36;
    background: #151c24;
    text-align: center;
}

.dronsoccer .feature-item strong {
    color: #ff0055;
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
}

.dronsoccer .formats-list {
    list-style: none;
    padding: 0;
    text-align: center;
    margin-bottom: 40px;
}

.dronsoccer .formats-list li {
    margin: 10px 0;
    font-size: 16px;
}

.dronsoccer .cta-box {
    padding: 40px;
    border: 2px solid #00d4ff;
    text-align: center;
    background: rgba(0, 212, 255, 0.035);
}

.dronsoccer .btn-download {
    display: inline-block;
    background: #ff0055;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 20px;
}

/*************/
/******background con fade in/out*******/
section.soccer {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}

/* Overlay negro semitransparente independiente (35%) */
section.soccer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 2;
}

/* Contenido encima del overlay */
section.soccer .content {
  position: relative;
  z-index: 3;
}

/* Capas de fondo para las 6 imágenes */
section.soccer .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation-duration: 99s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  z-index: 1;
}

/* Cada imagen con su animación */
section.soccer .bg1 { background-image: url('../img/soccer01.jpg'); animation-name: fade1; }
section.soccer .bg2 { background-image: url('../img/soccer02.jpg'); animation-name: fade2; }
section.soccer .bg3 { background-image: url('../img/soccer03.jpg'); animation-name: fade3; }
section.soccer .bg4 { background-image: url('../img/soccer04.jpg'); animation-name: fade4; }
section.soccer .bg5 { background-image: url('../img/soccer05.jpg'); animation-name: fade5; }
section.soccer .bg6 { background-image: url('../img/soccer06.jpg'); animation-name: fade6; }

/* Keyframes para cada imagen con fade in/out */
@keyframes fade1 {
  0%   { opacity: 1; }
  14%  { opacity: 1; }
  16%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fade2 {
  16%  { opacity: 1; }
  30%  { opacity: 1; }
  32%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fade3 {
  32%  { opacity: 1; }
  46%  { opacity: 1; }
  48%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fade4 {
  48%  { opacity: 1; }
  62%  { opacity: 1; }
  64%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fade5 {
  64%  { opacity: 1; }
  78%  { opacity: 1; }
  80%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fade6 {
  80%  { opacity: 1; }
  94%  { opacity: 1; }
  96%  { opacity: 0; }
  100% { opacity: 0; }
}