.feature-box {
  background: linear-gradient(145deg, #ffffff, #e9eff5);
  /* lo demás igual */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 30px 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 320px;
  margin-bottom: 40px; /*  margen inferior para evitar que se peguen */
}

.feature-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.feature-box h4 {
  font-weight: 800;
  margin-top: 20px;
  margin-bottom: 12px;
  font-size: 1.1rem;
  line-height: 1.3;
  color: #111111; /*  mejora contraste */
}

.feature-box p {
  font-size: 0.95rem;
  color: #333333;
  margin: 0 auto;
  max-width: 280px;
  line-height: 1.5;
}

.feature-box a {
  color: #007bff;
  font-weight: 600;
  text-decoration: none;
}

.feature-box a:hover {
  text-decoration: underline;
}

.feature-box a.btn-link {
  color: #007bff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: 0.2s;
}

.feature-box a.btn-link:hover {
  border-bottom: 1px dashed #007bff;
}

.feature-box .icon {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  color: #007bff;
}

/* Espaciado adicional para pantallas pequeñas */
@media screen and (max-width: 768px) {
  .feature-box {
    margin-bottom: 30px;
  }
}



    /* Evita el scroll cuando el modal está activo */
    body.modal-active {
      overflow: hidden;
    }

    /* Estilos del overlay: fondo semitransparente y difuminado */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(10px); /* Difumina el fondo */
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    /* Estilos del contenido del modal */
    .modal-content {
      background: #fff;
      padding: 2rem;
      border-radius: 10px;
      max-width: 600px;
      width: 90%;
      position: relative;
      animation: fadeInScale 0.5s ease;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
      text-align: center;
    }

    /* Animación de entrada para el modal */
    @keyframes fadeInScale {
      from { opacity: 0; transform: scale(0.8); }
      to { opacity: 1; transform: scale(1); }
    }

    /* Botón de cierre */
    .modal-close {
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 24px;
      font-weight: bold;
      color: #333;
      background: transparent;
      border: none;
      cursor: pointer;
    }

    /* Encabezado del modal */
    .modal-header {
      margin-bottom: 1rem;
		font-weight: bold;
	  
    }

    /* Área donde se muestran los logos */
    .modal-logos {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 1rem;
    }

    .modal-logos img {
      max-width: 200px;
      max-height: 200px;
      object-fit: contain;
    }

    /* Estilos para enlaces (opcional) */
    .modal-content a {
      color: #007BFF;
      text-decoration: none;
    }

    .modal-content a:hover {
      text-decoration: underline;
    }
		  
.bg-dark {
  background-color: #0D0D0E;
  color: white;
}
		  
/* Sección de recursos */
.recursos-section {
  background-color: #0d0d0e;  /* fondo negro/gris oscuro */
  color: white;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.recursos-section a {
  color: #00aaff;  /* color de links legible sobre fondo oscuro */
}

.recursos-section a:hover {
  text-decoration: underline;
}

.recursos-section h3,
.recursos-section h4,
.recursos-section .column-heading {
  color: #fff;
}

.recursos-section .column-icon img {
  filter: brightness(0) invert(1); /* íconos blancos si son oscuros */
}
		  
/* Eliminar imagen de fondo en sección específica */
.static-content-row-b4c164f0-ca1c-434e-bd8c-b683136d11f0 {
  background-image: none;
}
		  
.static-content-row-a259cc47-66f6-4cf1-9076-9b93a72b7f69 {
          background-color: #000;
          background-image: none;
}
		  
/* Centrado del bloque específico */
.content-block-bc72c3e3-1e47-4993-9570-f8269648604f {
  text-align: center;
}
		  
/* Espaciador responsivo */
.spacer-content-component-c3bec716-13af-4733-9119-1468d9948e07 {
  height: 60px;
  display: block;
}

@media screen and (min-width: 40em) {
  .spacer-content-component-c3bec716-13af-4733-9119-1468d9948e07 {
    height: 70px;
  }
}

@media screen and (min-width: 64em) {
  .spacer-content-component-c3bec716-13af-4733-9119-1468d9948e07 {
    height: 80px;
  }
}


/* Espaciador responsivo (tamaño grande) */
.spacer-content-component-89b73140-993f-47d1-96be-7028e11a1ab9 {
  height: 80px;
  display: block;
}

@media screen and (min-width: 40em) {
  .spacer-content-component-89b73140-993f-47d1-96be-7028e11a1ab9 {
    height: 90px;
  }
}

@media screen and (min-width: 64em) {
  .spacer-content-component-89b73140-993f-47d1-96be-7028e11a1ab9 {
    height: 100px;
  }
}

/* Centrado del bloque específico */
.content-block-6da0a044-b4b0-4b4e-8fff-18efbcc032a5 {
  text-align: center;
}

/* Espaciador responsivo (tamaño pequeño) */
.spacer-content-component-87334cc0-0eb9-40df-94f9-e03612593ce7 {
  height: 40px;
  display: block;
}

@media screen and (min-width: 40em) {
  .spacer-content-component-87334cc0-0eb9-40df-94f9-e03612593ce7 {
    height: 50px;
  }
}

@media screen and (min-width: 64em) {
  .spacer-content-component-87334cc0-0eb9-40df-94f9-e03612593ce7 {
    height: 60px;
  }
}

/* Color negro para encabezado específico */
.heading-content-component-afc4c75b-2600-4708-a409-0d5e1a2e6514 {
  color: #000;
}

/* Espaciador responsivo (tamaño grande) */
.spacer-content-component-194b6875-7635-4278-abd0-400a2ab609f7 {
  height: 80px;
  display: block;
}

@media screen and (min-width: 40em) {
  .spacer-content-component-194b6875-7635-4278-abd0-400a2ab609f7 {
    height: 90px;
  }
}

@media screen and (min-width: 64em) {
  .spacer-content-component-194b6875-7635-4278-abd0-400a2ab609f7 {
    height: 100px;
  }
}

/* Centrado de bloque de contenido */
.content-block-e50f5a3f-869a-4137-8cc5-b1b2862139c9 {
  text-align: center;
}

/* Fila sin fondo */
.static-content-row-3697cba4-68d3-48cf-b5c9-7fb21d070dc5 {
  background-image: none;
}

/* Alineación de bloques de contenido */
.content-block-0e7e373c-7c7b-4734-9f97-7671b525e901 {
  text-align: center;
}

.content-block-b6b35a3e-612e-41cb-87e8-196d1ea499a3,
.content-block-75f8b096-e964-4a5f-bdaf-9542e1df72f6 {
  text-align: left;
}

/* Espaciador responsivo */
.spacer-content-component-af3da4a4-9476-40b6-971f-b2fc15b9daf6 {
  height: 80px;
  display: block;
}

@media screen and (min-width: 40em) {
  .spacer-content-component-af3da4a4-9476-40b6-971f-b2fc15b9daf6 {
    height: 90px;
  }
}

@media screen and (min-width: 64em) {
  .spacer-content-component-af3da4a4-9476-40b6-971f-b2fc15b9daf6 {
    height: 100px;
  }
}

/* Filas sin imagen de fondo */
.static-content-row-aa2ae8b7-158a-4bf5-bb01-a8acdf12aecd {
  background-image: none;
}

/* Fila con fondo oscuro personalizado */
.static-content-row-4bf660fe-8a5a-4cc5-9abe-e0e456fe8778 {
  background-color: #0D0D0E;
  background-image: none;
}
		  
 /* Fila con fondo azul y textura de fondo */
.static-content-row-623c287e-a0d4-495d-bd80-1999ee682048 {
  background-color: #002458;
  background-image: url("../images/diagbrain.png");
}

/* Alineación centrada en móviles, izquierda en pantallas medianas o mayores */
.content-block-a4103169-2e25-46f6-bc43-717fbb2905cc {
  text-align: center;
}

@media screen and (min-width: 40em) {
  .content-block-a4103169-2e25-46f6-bc43-717fbb2905cc {
    text-align: left;
  }
}

/* Espaciador con altura variable según el ancho */
.spacer-content-component-f83ceee8-5c8d-49df-a911-669639eb81da {
  height: 340px;
  display: block;
}

@media screen and (min-width: 40em) {
  .spacer-content-component-f83ceee8-5c8d-49df-a911-669639eb81da {
    height: 90px;
  }
}

@media screen and (min-width: 64em) {
  .spacer-content-component-f83ceee8-5c8d-49df-a911-669639eb81da {
    height: 140px;
  }
}


/* Título principal con texto blanco */
.main-heading-content-component-7f3c2a82-2e59-4262-a6eb-79ea19b54f92 {
  color: #fff;
}

/* Espaciador adaptable según resolución */
.spacer-content-component-c454c818-b710-40a8-aea2-8c8e7652abaf {
  height: 50px;
  display: block;
}

@media screen and (min-width: 40em) {
  .spacer-content-component-c454c818-b710-40a8-aea2-8c8e7652abaf {
    height: 60px;
  }
}

@media screen and (min-width: 64em) {
  .spacer-content-component-c454c818-b710-40a8-aea2-8c8e7652abaf {
    height: 70px;
  }
}

/* Sección con fondo azul oscuro y gráfico de hacker */
.static-content-row-af5c6df0-05c5-49f3-904e-1a7924bf2d23 {
  background-color: #002458;
  background-image: url("../images/hacker_eslabon.png");
}

/* Alineación centrada en móvil, izquierda en pantallas medias y grandes */
.content-block-284f7d75-f850-4388-8859-ea6faff08471 {
  text-align: center;
}

@media screen and (min-width: 40em) {
  .content-block-284f7d75-f850-4388-8859-ea6faff08471 {
    text-align: left;
  }
}

/* Espaciado vertical adaptativo */
.spacer-content-component-a1531660-a932-46f8-b9ec-45ccc785789f {

  height: 330px;
  display: block;
}

@media screen and (min-width: 40em) {
  .spacer-content-component-a1531660-a932-46f8-b9ec-45ccc785789f {
    height: 60px;
  }
}

@media screen and (min-width: 64em) {
  .spacer-content-component-a1531660-a932-46f8-b9ec-45ccc785789f {
    height: 70px;
  }
}

/* Alineación centrada en todos los tamaños de pantalla */
.content-block-00cd2d5b-a279-40ff-bf57-24814200686a {
  text-align: center;
}

/* Espaciadores con altura adaptativa */
.spacer-content-component-03d25dcc-ee97-4c9d-8826-ad67aaa745e1 {
  height: 50px;
  display: block;
}
@media screen and (min-width: 40em) {
  .spacer-content-component-03d25dcc-ee97-4c9d-8826-ad67aaa745e1 {
    height: 60px;
  }
}
@media screen and (min-width: 64em) {
  .spacer-content-component-03d25dcc-ee97-4c9d-8826-ad67aaa745e1 {
    height: 70px;
  }
}

.spacer-content-component-98fc9a4d-d257-4fcb-8d75-a796252c7934 {
  height: 30px;
  display: block;
}
@media screen and (min-width: 40em) {
  .spacer-content-component-98fc9a4d-d257-4fcb-8d75-a796252c7934 {
    height: 40px;
  }
}
@media screen and (min-width: 64em) {
  .spacer-content-component-98fc9a4d-d257-4fcb-8d75-a796252c7934 {
    height: 50px;
  }
}

.spacer-content-component-5824317a-6d8f-45ed-82f8-d90d2c66c448,
.spacer-content-component-c20201c3-3762-4b23-8df2-f01853529b91 {
  height: 80px;
  display: block;
}
@media screen and (min-width: 40em) {
  .spacer-content-component-5824317a-6d8f-45ed-82f8-d90d2c66c448,
  .spacer-content-component-c20201c3-3762-4b23-8df2-f01853529b91 {
    height: 90px;
  }
}
@media screen and (min-width: 64em) {
  .spacer-content-component-5824317a-6d8f-45ed-82f8-d90d2c66c448,
  .spacer-content-component-c20201c3-3762-4b23-8df2-f01853529b91 {
    height: 100px;
  }
}

/* Colores de encabezados */
.heading-content-component-fd07415e-5e6b-4980-a1f3-0029c55aaaf3,
.main-heading-content-component-4ce5bdbd-5ee8-476c-8326-75cf60909b97,
.main-heading-content-component-94876783-cb67-44ab-a93d-3f4f23cc540f {
  color: #fff;  
}

.main-heading-content-component-178cce7e-2f0d-42f8-b241-0f6a6a4cd3e3{
  color: #000;  
}

/* Alineaciones responsivas */
.content-block-7938b227-ffa8-4319-bbc9-a4aca076f00c {
  text-align: left;
}
.content-block-34f55628-67ac-4dff-a78e-65c53cb4b9e7 {
  text-align: center;
}
@media screen and (min-width: 40em) {
  .content-block-34f55628-67ac-4dff-a78e-65c53cb4b9e7 {
    text-align: left;
  }
}