/* InterDiSC — capa de marca sobre la plantilla Ntec.
   Se carga DESPUÉS de main.css. */
:root{
  --id-dark:#1f2430;
  --id-primary:#2e74b5;
  --id-red:#e23b2e;
  --id-orange:#f39c12;
  --id-yellow:#f1c40f;
  --id-green:#2ecc71;
  --id-blue:#2e74b5;
  --id-teal:#16a0a0;
}

/* Motivo multicolor: barra de cuadritos como el mosaico del logo */
.id-mosaic{display:inline-flex;gap:4px;margin-bottom:18px}
.id-mosaic span{width:12px;height:12px;border-radius:2px;display:block}
.id-mosaic span:nth-child(1){background:var(--id-red)}
.id-mosaic span:nth-child(2){background:var(--id-orange)}
.id-mosaic span:nth-child(3){background:var(--id-yellow)}
.id-mosaic span:nth-child(4){background:var(--id-green)}
.id-mosaic span:nth-child(5){background:var(--id-blue)}
.id-mosaic span:nth-child(6){background:var(--id-teal)}

/* Tarjetas de solución: borde superior multicolor por posición */
.id-solution{border-top:4px solid var(--id-primary)}
.id-solution.id-c1{border-top-color:var(--id-red)}
.id-solution.id-c2{border-top-color:var(--id-green)}
.id-solution.id-c3{border-top-color:var(--id-blue)}

/* Helper para logo sobre fondos oscuros (el footer es claro, no lo usa) */
.id-logo-light{filter:brightness(0) invert(1)}

/* Botones de contacto directo */
.id-contact-btns{display:flex;flex-wrap:wrap;gap:14px}
.id-contact-btns .ht_btn{display:inline-flex;align-items:center;gap:8px}
.id-btn-whatsapp{background:#25D366;border-color:#25D366}

/* Tarjeta de marca (Productos) */
.id-brand-card{border:1px solid #e8eaee;border-radius:14px;padding:30px;height:100%;
  transition:.25s;background:#fff}
.id-brand-card:hover{box-shadow:0 18px 40px rgba(31,36,48,.10);transform:translateY(-4px)}
.id-brand-card h4{margin-bottom:10px}
.id-brand-card .id-brand-cats{color:#5b6470;font-size:15px}

/* Botón secundario contorneado */
.ht_btn-outline{background:transparent;border:2px solid var(--id-primary);color:var(--id-primary)}
.ht_btn-outline:hover{background:var(--id-primary);color:#fff}

/* Línea de tiempo Conócenos */
.id-timeline{position:relative;padding-left:34px}
.id-timeline:before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(var(--id-red),var(--id-yellow),var(--id-green),var(--id-blue))}
.id-timeline .id-tl-item{position:relative;margin-bottom:28px}
.id-timeline .id-tl-item:before{content:"";position:absolute;left:-30px;top:4px;width:18px;height:18px;
  border-radius:50%;background:var(--id-primary);border:3px solid #fff;box-shadow:0 0 0 2px var(--id-primary)}
.id-timeline .id-tl-year{font-weight:800;color:var(--id-primary);font-size:20px}

/* Neutraliza un background decorativo que la plantilla Ntec referencia pero
   no incluye (chose/choose__bg__01.png) — evita un 404 en consola. */
.choose__section{background-image:none}

/* Fotos de contenido (stock) en el Inicio */
.hero__img img{border-radius:18px;box-shadow:0 24px 60px rgba(1,5,12,.18)}
.choose__section .choose__main__1{right:0;width:100%;border-radius:18px;box-shadow:0 24px 50px rgba(1,5,12,.15)}
.feature__section .feature__01{width:100%;filter:brightness(.5)}
/* Banner de páginas internas: oscurece la foto para que el título blanco se lea */
.about__banner .about__banner__01{width:100%;filter:brightness(.6)}

/* Quita el círculo gris detrás de los íconos de los beneficios (artefacto del template) */
.choose__type .icon{background:transparent !important;width:auto !important;height:auto !important;
  line-height:normal !important;border-radius:0 !important;margin-right:6px}

/* Cuadrícula de sistemas integrados (página DAR) */
.id-system{background:#fff;border:1px solid #e8eaee;border-radius:12px;padding:24px 14px;text-align:center;
  height:100%;transition:.25s;margin-bottom:24px}
.id-system:hover{box-shadow:0 16px 34px rgba(1,5,12,.10);transform:translateY(-3px);border-color:transparent}
.id-system i{font-size:30px;line-height:1;display:block;margin-bottom:12px;color:var(--id-primary)}
.id-system h6{margin:0;font-size:15px;line-height:1.3;font-weight:600}
.id-systems-grid>div:nth-child(6n+1) .id-system i{color:var(--id-red)}
.id-systems-grid>div:nth-child(6n+2) .id-system i{color:var(--id-orange)}
.id-systems-grid>div:nth-child(6n+3) .id-system i{color:var(--id-yellow)}
.id-systems-grid>div:nth-child(6n+4) .id-system i{color:var(--id-green)}
.id-systems-grid>div:nth-child(6n+5) .id-system i{color:var(--id-blue)}
.id-systems-grid>div:nth-child(6n+6) .id-system i{color:var(--id-teal)}

/* Certificación NOM-024 (página DAR) */
.id-cert-badges{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.id-cert-badge{display:flex;flex-direction:column;border:2px solid var(--id-primary);border-radius:10px;
  padding:12px 18px;font-weight:800;color:var(--id-primary);line-height:1.2}
.id-cert-badge small{font-weight:500;color:#5b6470;font-size:12px;margin-top:4px}
.id-cert-item{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #eef0f3}
.id-cert-item i{color:var(--id-green);font-size:20px;flex-shrink:0}
.id-cert-item b{color:var(--id-primary);font-weight:700}