/* Estilos específicos para la cuadrícula de documentos */
        .legal-header {
            background-color: var(--color-secondary);
            color: var(--color-white);
            padding: 60px 20px;
            text-align: center;
            border-bottom: 5px solid var(--color-primary);
        }
        .legal-header h1 {
            color: var(--color-white);
            font-size: 2.5em;
            margin: 0 0 10px 0;
            text-transform: uppercase;
        }
        .legal-header p {
            font-size: 1.2em;
            font-weight: 300;
        }
        .doc-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            padding: 50px 0;
        }
        .doc-card {
            width: 280px;
            background-color: var(--color-white);
            border-radius: 10px;
            padding: 40px 20px;
            text-align: center;
            transition: all 0.3s ease-in-out;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            border: 1px solid #eaeaea;
        }
        .doc-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(49, 54, 76, 0.15); /* Sombra con tu azul secundario */
            border-bottom: 4px solid var(--color-primary);
        }
        .doc-icon {
            font-size: 60px;
            color: var(--color-secondary);
            margin-bottom: 25px;
            transition: all 0.3s ease;
        }
        .doc-card:hover .doc-icon {
            color: var(--color-primary);
            transform: scale(1.1);
        }
        .doc-title {
            font-size: 13pt;
            font-weight: bold;
            color: var(--color-secondary);
            margin-bottom: 25px;
            min-height: 50px; /* Alineación uniforme si el título ocupa dos líneas */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .doc-actions {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
        }
        .doc-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            color: var(--color-white);
            padding: 10px 15px;
            border-radius: 20px;
            text-decoration: none;
            font-weight: bold;
            font-size: 9pt;
            text-transform: uppercase;
            transition: all 0.3s;
            flex: 1; /* Para que ambos botones midan lo mismo */
        }
        .btn-view {
            background-color: var(--color-secondary);
        }
        .btn-view:hover {
            background-color: #1a1d29; /* Un azul más oscuro */
        }
        .btn-down {
            background-color: var(--color-primary);
        }
        .btn-down:hover {
            background-color: #c95e22; /* Un naranja más oscuro */
        }

        /* =======================================================
           1. LAPTOPS Y TABLETS HORIZONTALES (Pantallas medianas)
           ======================================================= */
        @media (max-width: 1024px) {
            .doc-grid {
                gap: 25px;
                padding: 40px 0;
            }
            .doc-card {
                width: 310px; /* Se ensanchan un poco para aprovechar el espacio */
            }
        }

        /* =======================================================
           2. TABLETS VERTICALES Y MÓVILES (Tarjetas MÁS GRANDES)
           ======================================================= */
        @media (max-width: 768px) {
            .legal-header {
                padding: 40px 15px;
            }
            .legal-header h1 {
                font-size: 2em; 
            }
            .doc-grid {
                flex-direction: column; /* Pasa a una sola columna */
                align-items: center;
                gap: 30px;
                padding: 40px 15px;
            }
            .doc-card {
                width: 90%;          /* Ocupa casi todo el ancho del móvil */
                max-width: 480px;    /* Límite máximo para verse imponente pero no deforme */
                padding: 45px 30px;  /* Más relleno para inflar la tarjeta */
            }
            .doc-icon {
                font-size: 75px;     /* Ícono un 25% más grande en móvil */
                margin-bottom: 20px;
            }
            .doc-title {
                font-size: 15pt;     /* Título más grande y legible */
                min-height: auto;
                margin-bottom: 20px;
            }
            .doc-actions {
                flex-direction: column; /* Apila los botones */
                gap: 15px;              /* Más separación entre botones */
            }
            .doc-btn {
                width: 100%;
                padding: 14px 20px;     /* Botones más altos (área táctil más grande) */
                font-size: 10.5pt;      /* Texto del botón más grande */
                box-sizing: border-box;
            }
        }

        /* =======================================================
           3. MÓVILES MUY PEQUEÑOS (Pantallas antiguas/estrechas)
           ======================================================= */
        @media (max-width: 480px) {
            .doc-card {
                width: 95%;         /* Aprovecha el máximo borde de la pantalla */
                padding: 35px 20px; /* Ajusta el relleno para que no apriete el texto */
            }
            .doc-title {
                font-size: 13pt;    /* Reduce un toque para evitar saltos de línea feos */
            }
            .legal-header h1 {
                font-size: 1.7em;
            }
        }