:root{
	--main-color-naranja:#F29100;
	--main-color-verde:#43B183;
    --main-color-verde-claro:#64b997;
  --main-color-azul-oscuro:#24195D;
  --blanco:white;
  --negro:black;
}
/* Sección principal */
.seccion-documentos-principales {
    padding: 70px 20px;
    text-align: center;
    background-color: #f5f5f5;
  }
  
  .encabezado-documentos-principales h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--main-color-azul-oscuro);
  }
  .titulos-dian h2 {
    font-size: 3.9rem;
    font-weight: bold;
    color: var(--blanco); /* Azul oscuro */
    margin-bottom: 15px;
  }
  
  .encabezado-documentos-principales .subtitulo-documentos-principales {
    font-size: 2rem;
    color: var(--main-color-azul-oscuro);
    margin-bottom: 80px;
   
  }
  
  /* Contenedor de tarjetas */
  .contenedor-tarjetas-documentos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Tarjetas Flip */
  .tarjeta-flip-documento {
    perspective: 1000px;
  }
  
  .tarjeta-flip-inner-documento {
    position: relative;
    width: 100%;
    height: 350px;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
  }
  
  .tarjeta-flip-documento:hover .tarjeta-flip-inner-documento {
    transform: rotateY(180deg);
  }
  
  /* Frente de la tarjeta */
  .tarjeta-flip-front-documento,
  .tarjeta-flip-back-documento {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .tarjeta-flip-front-documento {
    background-size: cover;
    background-position: center;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  }
  
  .tarjeta-flip-back-documento {
    background-color: #fff;
    transform: rotateY(180deg);
    text-align: center;
    padding: 20px;
    border: 1px solid #ddd;
  }
  
  .tarjeta-flip-back-documento p {
    margin-bottom: 15px;
    color: #333;
  }
  
  
  .boton-ver-pdf-documento {
    display: inline-block;
    text-decoration: none;
    background-color: var(--main-color-verde);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s;
  }
  
  .boton-ver-pdf-documento:hover {
    background-color: var(--main-color-verde-claro);
  }
  
  /* Fondos de las tarjetas */
  .tarjeta-fondo1 {
    background-image: url('../images/images-crediahorros/dian1.jpg');
  }
  
  .tarjeta-fondo2 {
    background-image: url('../images/images-crediahorros/dian2.jpg');
  }
  
  .tarjeta-fondo3 {
    background-image: url('../images/images-crediahorros/dian3.jpg');
  }
  
  .tarjeta-fondo4 {
    background-image: url('../images/images-crediahorros/dian1.webp');
  }
  
  .tarjeta-fondo5 {
    background-image: url('../images/images-crediahorros/dian3.webp');
  }
  
  .tarjeta-fondo6 {
    background-image: url('../images/images-crediahorros/dian2.webp');
  }
  
  /* Responsivo */
  @media (max-width: 768px) {
    .contenedor-tarjetas-documentos {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 480px) {
    .contenedor-tarjetas-documentos {
      grid-template-columns: 1fr;
    }
  }