body {
    background-color: #000000;
    font-family: 'Segoe UI', sans-serif;
  }
  .card-custom {
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    background-color: #000000;
  }
  .card-custom:hover {
    transform: scale(1.02);
  }

  .header {
    display: flex;
    align-items: center;        /* Centra verticalmente imagen y texto */
    justify-content: center;    /* Centra todo el bloque en la página */
    gap: 20px;                  /* Espacio entre imagen y texto */
    text-align: left;           /* El texto queda alineado a la izquierda */
    color: white;
}

.header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}



  .header {
    background-color: #000000;
    color: white;
    padding: 1rem;
    text-align: center;
    border-radius: 0 0 12px 12px;
  }
  .card-title
  {
    color: #fff;
  }
  .card-text
  {
    color: #fff;
  }


  .fila {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: 1200px;
padding: 20px 0;
color:#fff;
}

.columna {
flex: 1;
padding: 20px;
}

/* Centrar la imagen dentro de su columna */
.columna.imagen {
display: flex;
justify-content: center;
align-items: center;
}

.columna.imagen img {
max-width: 100%;
height: auto;
display: block;
}

/* --- RESPONSIVE: cuando la pantalla es estrecha --- */
@media (max-width: 768px) {
.fila {
  flex-direction: column;   /* Las columnas pasan a estar una debajo de otra */
  text-align: center;       /* Opcional: centra el texto */
}

.columna {
  width: 100%;              /* Cada columna ocupa toda la fila */
  padding: 10px 0;
}

}

.texto
{
  text-align: justify;
}